body { background-color: #fff; color: #777; font-family: "Roboto",sans-serif; font-size: 14px; font-weight: 300; line-height: 26px; } @font-face { font-family: "Roboto"; src: local(Roboto Thin),url("../font/roboto/Roboto-Thin.woff2") format("woff2"),url("../font/roboto/Roboto-Thin.woff") format("woff"),url("../font/roboto/Roboto-Thin.ttf") format("truetype"); font-weight: 200; } @font-face { font-family: "Roboto"; src: local(Roboto Light),url("../font/roboto/Roboto-Light.woff") format("woff"),url("../font/roboto/Roboto-Light.ttf") format("truetype"); font-weight: 300; } @font-face { font-family: "Roboto"; src: local(Roboto Regular),url("../font/roboto/Roboto-Regular.woff") format("woff"),url("../font/roboto/Roboto-Regular.ttf") format("truetype"); font-weight: 400; } @font-face { font-family: "Roboto"; src: url("../font/roboto/Roboto-Medium.woff") format("woff"),url("../font/roboto/Roboto-Medium.ttf") format("truetype"); font-weight: 500; } @font-face { font-family: "Roboto"; src: url("../font/roboto/Roboto-Bold.woff") format("woff"),url("../font/roboto/Roboto-Bold.ttf") format("truetype"); font-weight: 700; } html, body { height: 100%; } h1, h2, h3, h4, h5, h6 { color: #333; font-family: "Roboto",sans-serif; font-weight: 300; } a { font-family: "Roboto",sans-serif; text-decoration: none; -webkit-transition: all 0.2s; transition: all 0.2s; } a, a:hover { color: #fb8309; text-decoration: none; } a:focus { outline: none; text-decoration: none; } p { margin-bottom: 0; } ul, li { margin: 0; padding: 0; } fieldset { border: 0 none; margin: 0 auto; padding: 0; } /*START PRELOADER DESIGN*/ .preloader { background: #fff; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 9999; } .status, .status-mes { background-image: url(../Images/status.gif); background-position: center; background-repeat: no-repeat; height: 200px; left: 50%; margin: -100px 0 0 -100px; position: absolute; top: 50%; width: 200px; } .status-mes { background: none; left: 0; margin: 0; text-align: center; top: 65%; } .status-mes h4 { color: #333; margin-top: 30px; } .no-padding { padding: 0; } /*END PRELOADER DESIGN*/ .preloader2 { background: #ffffff6e; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 9999; } .status2, .status-mes2 { background-image: url(../Images/status.gif); background-position: center; background-repeat: no-repeat; height: 200px; left: 50%; margin: -100px 0 0 -100px; position: absolute; top: 50%; width: 200px; } .status-mes2 { background: none; left: 0; margin: 0; text-align: center; top: 65%; } .status-mes2 h4 { color: #333; margin-top: 30px; } /*START NEW PRELOADER DESIGN*/ .newpreloader { background: #fff; bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 9999; } .newstatus, .newstatus-mes { background-image: url(../Images/status.gif); background-position: center; background-repeat: no-repeat; height: 200px; left: 50%; margin: -100px 0 0 -100px; position: absolute; top: 50%; width: 200px; } .newstatus-mes { background: none; left: 0; margin: 0; text-align: center; top: 65%; } .newstatus-mes h4 { color: #333; margin-top: 30px; } .no-padding { padding: 0; } /*END NEW PRELOADER DESIGN*/ /*START SCROLL TO TOP*/ .topcontrol { z-index: 99; background: #fb8309 none repeat scroll 0 0; border-radius: 50px; bottom: 5px; box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2); color: #fff; cursor: pointer; font-size: 26px; height: 40px; opacity: 1; filter: alpha(opacity=100); padding: 5px 12px; position: fixed; right: 5px; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; width: 40px; } .topcontrol:hover { background: #222; color: #fff; } /*END SCROLL TO TOP*/ .section-padding { padding: 60px 0; } /*START SECTION TITLE DESIGN*/ .section-title h2 { margin: 0; text-transform: uppercase; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { transition: background-color 5000s ease-in-out 0s !important; -webkit-text-fill-color: #000 !important; } @media only screen and (max-width:360px) { .section-title h2 { font-size: 24px; } } .navbar .container { width: 100% !important; } .navbar-nav > li { border-left: 1px solid rgba(165, 165, 165, 0.25); } .section-title h2 span { color: #fb8309; } .section-title-white { color: #fff!important; } .section-title div { background: #fb8309 none repeat scroll 0 0; display: block; height: 3px; margin: 20px auto 60px; width: 80px; } /*END SECTION TITLE DESIGN*/ /*START BTN STYLE*/ .btn-light-bg { background: #8bc34a none repeat scroll 0 0; border: 2px solid #8bc34a; border-radius: 3px; box-shadow: 0 8px 25px 0 rgba(0, 0, 0, 0.1); color: #fff; font-family: Roboto,sans-serif; font-size: 12px; padding: 8px 20px; text-transform: uppercase; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .btn-light-bg:hover, .btn-light-bg:focus { background: #333; color: #fff; border: 2px solid #333; } /*END BTN STYLE*/ /*SECTION OVERLAY*/ .overlay { background: rgba(0,0,0,0.6) none repeat scroll 0 0; } /*END SECTION OVERLAY*/ /* * ---------------------------------------------------------------------------------------- * 01.END GENERAL STYLE * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 02. START BOOTSTRAP NAVIGATION OVERRIDES * ---------------------------------------------------------------------------------------- */ .navbar-default { border: none; border-radius: 0; margin-bottom: 0; min-height: 50px; width: 100%; /* padding: 20px 0; */ background: #fff; transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #FFF !important; /* padding: 30px 20px 44px; */ background-color: #fb8309 !important; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #8bc34a !important; background-color: transparent; } .navbar-brand { padding: 0px; } .navbar-brand img { width: 89px; margin-left: 10px; margin-top: 0px; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #fff; } .menu-top { background: #FFF; box-shadow: -1px 1px 1px #cac9c9; padding-bottom: 0.5px; } .menu-top li a { color: #313131!important; font-size: 14px; font-weight: 300; text-transform: uppercase; padding: 25px; } .menu-top li a:hover { color: #FFF !important; background-color: #fb8309 !important; } .navbar-default .navbar-nav > .active a img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .menu-top li a:hover img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } @media only screen and (max-width:768px) { .navbar-default .navbar-nav > li > a { margin-top: 10px; padding: 8px; } } @media only screen and (max-width:480px) { .menu-top { background-color: #fff; } .navbar-default .navbar-nav > li > a { color: #313131 !important; } } .navbar-default.menu-shrink { background-color: #FFF; box-shadow: -1px 1px 1px #cac9c9; width: 100%; } @media only screen and (max-width:480px) { .menu-top { color: #fff !important; margin-left: 0px; } } @media only screen and (max-width:760px) { .carousel-control { display: block; top: 55.6% !important; } .carousel-control.left { margin-left: 0px !important; } .carousel-control.right { margin-right: 0px !important; } .single-slide-item h2 { margin-top: 48% !important; } .navbar-nav { text-align: center; } .welcome-area, .welcome-slider-area, .welcome-slider-area div { height: 400px !important; } } .navbar-default.menu-shrink li a { color: #313131!important; } .navbar-default.menu-shrink li a:hover { color: #FFF !important; } .navbar-default .navbar-toggle { background: #fff none repeat scroll 0 0; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #fff; } .navbar-default .navbar-toggle .icon-bar { background-color: #fb8309; } /* * ---------------------------------------------------------------------------------------- * 02.END BOOTSTRAP NAVIGATION OVERRIDES * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 03.START HOME DESIGN * ---------------------------------------------------------------------------------------- */ .welcome-area, .welcome-slider-area, .welcome-slider-area div { height: 700px; } .welcome-slider-area div.single-slide-item-tablecell, .welcome-slider-area div.single-slide-item-tablecell div { height: auto; } .single-slide-item-table { display: table; text-align: center; width: 100%; } .single-slide-item-tablecell { display: table-cell; vertical-align: middle; } .single-slide-item { position: relative; z-index: 1; } .single-slide-item:after { position: absolute; background: rgba(0,0,0,0.6); left: 0; top: 85%; width: 100%; height: 100%; content: ""; z-index: -1; } .slide-1 { background: url(../Slider/img/bg/wall5.jpg) scroll 0 0; background-size: cover; } .slide-2 { background: url(../Slider/img/bg/MyCableTv12.png) scroll 0 0; background-size: cover; } .slide-3 { background: url(../Slider/img/bg/MyCableTv222222222.jpg) scroll 0 0; background-size: cover; } .slide-4 { background: url(../Slider/img/bg/Capture1.PNG) scroll 0 0; background-size: cover; } .carousel-control { z-index: 1; background-image: none !important; top: 46.6%; width: 45px; height: 45px; line-height: 45px; background: transparent; } .carousel-control.left { margin-left: 20px; } .carousel-control.right { margin-right: 20px; } .carousel-fade .carousel-inner .item { -webkit-transition-property: opacity; transition-property: opacity; } .carousel-fade .carousel-inner .item, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { opacity: 0; filter: alpha(opacity=0); } .carousel-fade .carousel-inner .active, .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; filter: alpha(opacity=100); } .carousel-fade .carousel-inner .next, .carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .single-slide-item h2 { color: #f8f8f8; font-size: 40px; margin-top: 50%; text-transform: uppercase; } .single-slide-item p { color: #fff; margin-bottom: 30px; } .carousel-indicators-slider { bottom: 30px !important; } .btn-home-bg { background: #8bc34a none repeat scroll 0 0; border: 2px solid #8bc34a; border-radius: 0; color: #fff; font-family: Roboto,sans-serif; font-size: 12px; padding: 12px 30px; text-transform: uppercase; transition: all 0.2s ease 0s; } .btn-home-bg:hover, .btn-home-bg:focus { background: #fff; color: #333; border: 2px solid #fff; } /*START OTHER HOME PAGE DESIGN*/ .youtube_bg { height: 650px; position: relative; } .youtube_bg:before { background: rgba(0, 0, 0, 0.6); content: ""; height: 100%; left: 0; opacity: 0.8; position: absolute; top: 0; width: 100%; } .home_text { padding-top: 250px; text-align: center; } .home_text h2 { color: #f8f8f8; font-size: 40px; margin-top: 0; text-transform: uppercase; } .home_text p { color: #fff; margin-bottom: 30px; } /*START HTML5 VIDEO DESIGN*/ .html-video { top: 0%; left: 0%; max-height: 700px; width: 100%; overflow: hidden; position: relative; } .html-video:before { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); opacity: 0.8; content: ""; left: 0; top: 0; } .slider-caption { position: absolute; top: 35%; width: 100%; left: 0; text-align: center; z-index: 15; -webkit-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); transform: translate(0%, -50%); } video { min-width: 100%; } /*END HTML5 VIDEO DESIGN*/ /*START OTHER HOME PAGE DESIGN*/ /* * ---------------------------------------------------------------------------------------- * 03.END HOME DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 04.START FEATURE AND ABOUT DESIGN * ---------------------------------------------------------------------------------------- */ .feature { padding-bottom: 60px; } .single_about { background: #f8f8f8 none repeat scroll 0 0; border-bottom: 1px solid #e8e8e9; border-right: 1px solid #e8e8e9; padding: 40px 20px; transition: all 0.4s ease 0s; min-height: 320px; } @media only screen and (max-width:768px) { .single_about { margin-bottom: 40px; } } .single_about:last-child { border-right: 0px; padding-bottom: 66px; } .single_about:hover { background: #fb8309; } .single_about i { background: #fb8309 none repeat scroll 0 0; border: 1px solid #fb8309; border-radius: 50%; color: #fff; display: inline-block; font-size: 24px; height: 60px; line-height: 60px; margin: 0 0 24px; text-align: center; text-decoration: none; transition: all 0.2s ease-in-out 0s; width: 60px; } .single_about h4 { font-weight: 400; text-transform: uppercase; letter-spacing: 1px; -webkit-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .single_about p { -webkit-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } @media only screen and (max-width:768px) { .single_about h4 { font-size: 15px; } } .single_about:hover i { background: #fff; color: #fb8309; border: 1px solid #e8e8e9; } .single_about:hover h4 { color: #fff; } .single_about:hover p { color: #fff; } /*END FEATURE DESIGN*/ /*START ABOUT DESIGN*/ .single_about_content h4 { font-size: 24px; letter-spacing: 1px; margin-bottom: 20px; margin-top: 0; text-transform: uppercase; } .single_about_content p { margin-bottom: 30px; } @media only screen and (max-width:480px) { .about_img { margin: 60px 0; } } /* START SKILL DESIGN */ .progress-bar-text { color: #333; font-family: "Roboto",sans-serif; font-size: 12px; font-weight: 300; margin-bottom: 10px; text-transform: uppercase; } .progress-bar-text span { float: right; } .progress-bar { background: #e8e8e9 none repeat scroll 0 0; box-shadow: 0 0 0; height: 4px; margin: 0 0 20px; position: relative; width: 100%; } .progress-bar > span { background: #8bc34a none repeat scroll 0 0; display: block; height: 100%; width: 0; } /* END SKILL DESIGN */ /*END ABOUT DESIGN*/ /* * ---------------------------------------------------------------------------------------- * 04.END FEATURE AND ABOUT DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 05.START WHY CHOOSE US DESIGN * ---------------------------------------------------------------------------------------- */ .single_feature { background: #f5f5f5 none repeat scroll 0 0; margin-top: 50px; padding: 50px; } @media only screen and (max-width:768px) { .single_feature { padding-top: 0px; } } @media only screen and (max-width:480px) { .single_feature { padding-top: 50px; } } .feature_img { margin: auto auto 0; max-width: 350px; } .single_feature i { border-radius: 50%; color: #fff; background: #8bc34a; display: inline-block; font-size: 24px; height: 60px; line-height: 62px; margin: 0 auto 15px; position: relative; text-align: center; width: 60px; z-index: 3; } .single_feature h3 { text-transform: uppercase; font-size: 14px; } .single_feature span { border-bottom: 1px dashed #999; margin: auto; width: 80px; display: block; margin: 20px auto; } .single_feature p { margin-bottom: 0; } .carousel-indicators li { background: none; border: 1px solid #fb8309; border-radius: 12px; height: 12px; margin: 0 1px; width: 12px; } .carousel-indicators .active { height: 12px; margin: 0 1px; width: 12px; border: 1px solid #FFF; background: #fb8309 none repeat scroll 0 0; } .carousel-indicators { bottom: 0px; } @media only screen and (max-width:480px) { .carousel-indicators { bottom: 0px; } } /* * ---------------------------------------------------------------------------------------- * 05.END WHY CHOOSE US DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 0.START OUR SERVICE DESIGN * ---------------------------------------------------------------------------------------- */ .our_service { background: #f7f7f7; } .single_service { background: #fff none repeat scroll 0 0; border: 1px solid #eee; margin-left: -1px; margin-top: -1px; padding: 40px; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; position: relative; } .single_service:hover { box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, 0.3); z-index: 1; } .single_service i { font-size: 40px; padding-bottom: 20px; color: #fb8309; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .single_service h4 { color: #333; margin: 0; padding-bottom: 20px; text-transform: uppercase; font-size: 16px; font-weight:400; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .single_service p { margin-bottom: 0; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } /* * ---------------------------------------------------------------------------------------- * 0.END OUR SERVICE DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 0.START PORTFOLIO DESIGN * ---------------------------------------------------------------------------------------- */ .work_all_item .mix { display: none; } .our_work_menu { margin-bottom: 50px; } .our_work_menu ul { list-style-type: none; padding: 0; } .our_work_menu ul li { border-bottom: 1px solid transparent; color: #555; cursor: pointer; display: inline-block; font-family: Roboto,sans-serif; font-size: 14px; font-weight: 600; margin: 0 18px; padding: 9px 0; text-transform: uppercase; transition: all 0.3s ease 0s; } .our_work_menu ul li:hover, .our_work_menu ul li.active { border-color: #8bc34a; color: #8bc34a; } #our_work .grid-item { margin-top: 30px; } .single_our_work { margin-bottom: 30px; overflow: hidden; text-align: center; transition: all 0.3s ease 0s; } .sing_work_photo { position: relative; } .single_our_work img { width: 100%; transition: all 0.2s ease 0s; } .single_our_work figure { margin-bottom: 0; } .sing_work_text_link { position: absolute; width: 100%; height: 100%; top: 0; color: #fff; background: rgba(0,0,0, 0.5) none repeat scroll 0 0; transition: .5s; opacity: 0; visibility: hidden; transform: scale(0); } .sing_work_content_wrap { display: table; height: 100%; width: 100%; } .sing_work_content { display: table-cell; vertical-align: middle; } .sing_work_text_link h4 { color: #fff; font-size: 19px; font-weight: 600; margin-bottom: 21px; text-transform: uppercase; } .single_our_work:hover .sing_work_text_link h4 { animation: fadeInDown 700ms ease-in-out; } .single_our_work:hover .sing_work_text_link p { animation: fadeInDown 900ms ease-in-out; } .sing_work_text_link p { margin: 0 0 10px; } .sing_link_img a i.fa { font-size: 14px; } .sing_link_img a { background: #8bc34a none repeat scroll 0 0; border: 1px solid #8bc34a; border-radius: 50%; color: #fff; display: inline-block; height: 40px; line-height: 39px; transition: all 0.3s ease 0s; width: 40px; } .sing_link_img a:hover { background: #fff none repeat scroll 0 0; border-color: #fff; color: #333; } .sing_link_img a.search { margin-right: 16px; } .single_our_work:hover .sing_link_img a.search { animation: slideInUp 800ms ease-in-out; } .single_our_work:hover .sing_link_img a.link { animation: slideInUp 800ms ease-in-out; } .single_our_work:hover { background: #32c5d2; color: #fff; } .single_our_work:hover .sing_work_text_link { opacity: 1; visibility: visible; transform: scale(1.1); } .portfolio_btn { padding-top: 20px; } /* * ---------------------------------------------------------------------------------------- * 0.END PORTFOLIO DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 0.START COUNTER DESIGN * ---------------------------------------------------------------------------------------- */ .counter_feature { background: #f2f2f2 none repeat scroll 0 0; padding: 100px 0; display: none; } @media only screen and (max-width:768px) { .counter { margin-bottom: 40px; overflow: hidden; } } .counter i { background: #fff none repeat scroll 0 0; border: 1px solid #eee; border-radius: 100px; color: #8bc34a; float: left; font-size: 30px; height: 70px; line-height: 70px; margin-right: 20px; text-align: center; width: 70px; transition: all 0.3s ease 0s; } .counter:hover i { background: #8bc34a none repeat scroll 0 0; border: 1px solid #8bc34a; color: #fff; box-shadow: 0px 11px 10px 0px rgba(0,0,0,0.1); } .counter h2 { color: #161616; font-weight: 700; margin-top: 0; } .counter h5 { color: #161616; text-transform: uppercase; margin-bottom: 0; } @media only screen and (max-width:768px) { .counter p { font-size: 13px; } .navbar-header { text-align: right; } #QuickPayBtn { display: initial !important; } nav .QuickPay { padding: 8px !important; } } @media only screen and (max-width:360px) { .counter p { font-size: 12px; } } @media only screen and (max-width:320px) { .counter p { font-size: 18px; } } /* * ---------------------------------------------------------------------------------------- * 0.END COUNTER DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 0.END ABOUT US DESIGN * ---------------------------------------------------------------------------------------- */ .about_video { height: 500px; position: relative; } .about_video:before { background: rgba(0, 0, 0, 0) linear-gradient(to right bottom, #8bc34a, #24c5e5) repeat scroll 0 0; content: ""; height: 100%; left: 0; opacity: 0.8; position: absolute; top: 0; width: 100%; } .about_video_main { position: absolute; width: 550px; top: 85px; left: 0; right: 0; margin: 0 auto; pointer-events: all; } /*For Safari*/ @media screen and (-webkit-min-device-pixel-ratio:0) { .about_video:before { background-color: rgba(2, 128, 2, 0.52) !Important; } } .video-container h3 { color: #fff; font-size: 50px; font-weight: 300; margin-bottom: 40px; margin-top: -10px; } .play-video { background-color: #fff; border-radius: 30px; cursor: pointer; height: 60px; left: 50%; margin-left: -38px; position: absolute; top: 85%; transition: all 0.2s ease 0s; width: 60px; } .video-container a { display: inline-block; } .video-container a:hover .play-video { } .play-video .fa-play { color: #333; font-size: 22px; font-weight: 400; left: 24px; position: absolute; top: 20px; } .modal-content { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; margin-top: 100px; text-align: center; box-shadow: none; border: none; } .modal-content iframe { border: none; } /* * ---------------------------------------------------------------------------------------- * 0.END ABOUT US DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 0.START OUR TEAM DESIGN * ---------------------------------------------------------------------------------------- */ .single_team { margin-top: 30px; transition: all 0.3s ease 0s; } .single_team:hover { box-shadow: 0px 0px 10px rgba(0,0,0,0.2); } .single_team h3 { color: #8bc34a; font-size: 18px; margin-bottom: 5px; margin-top: 15px; text-transform: uppercase; } .single_team p { font-size: 14px; letter-spacing: 2px; text-transform: uppercase; } .img_wrap { position: relative; } .social_link { height: 100%; opacity: 0; position: absolute; text-align: center; top: 0; transition: all 0.5s ease 0s; visibility: hidden; width: 100%; z-index: 1; background: rgba(0,0,0,0.5); transform: scale(0); } .img_wrap:hover .social_link { opacity: 1; visibility: visible; transform: scale(1); } .social_table { display: table; height: 100%; width: 100%; } .social_table ul { list-style: none; display: table-cell; list-style: outside none none; padding: 0; vertical-align: middle; } .social_table ul a { background: #8bc34a none repeat scroll 0 0; border: 1px solid #8bc34a; border-radius: 50%; color: #fff; display: inline-block; height: 40px; line-height: 40px; transition: all 0.5s ease 0s; width: 40px; } .social_table ul a:hover { background: #fff none repeat scroll 0 0; color: #333; border-color: #fff; } /* * ---------------------------------------------------------------------------------------- * 0.END OUR TEAM DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * .START NEWSLETTER DESIGN * ---------------------------------------------------------------------------------------- */ .newsletter { position: relative; } .newsletter::before { position: absolute; width: 100%; height: 100%; background: transparent; content: ""; left: 0; top: 0; } .signup_form h3 { color: #fff; font-size: 18px; line-height: 34px; margin-bottom: 30px; margin-top: 0; text-transform: capitalize; } .signup_form input { -moz-border-bottom-colors: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border-color: -moz-use-text-color -moz-use-text-color #fff; border-image: none; border-radius: 0; border-style: none none solid; border-width: medium medium 1px; color: #fff; font-family: Roboto,sans-serif; margin-bottom: 30px; transition: all 0.2s ease 0s; } .signup_form input:hover, .signup_form input:focus { border-bottom: 1px solid #8bc34a; box-shadow: none; outline: 0 none; } .signup_form button { font-family: Roboto,sans-serif; font-size: 14px; font-weight: 600; letter-spacing: 1px; padding: 10px 30px; } .signup_form button:hover { background: #fff none repeat scroll 0 0!important; color: #333; border: 2px solid #fff; } /* * ---------------------------------------------------------------------------------------- * .END NEWSLETTER DESIGN * ---------------------------------------------------------------------------------------- */ #portfolio .section-padding { padding-bottom: 0px; } #portfolio img { width: 400px; } /* * ---------------------------------------------------------------------------------------- * 0.START PRICING DESIGN * ---------------------------------------------------------------------------------------- */ .pricing-table { background-color: #fff; box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); position: relative; -webkit-transition: all 0.4s ease 0s; transition: all 0.4s ease 0s; } .pricing-table:hover { box-shadow: 0 21px 65px 0px rgba(0, 0, 0, 0.12); } @media only screen and (max-width:480px) { .pricing-table { margin-bottom: 40px; } } .pricing-table.active { box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); } .pricing-table h3 { color: #333; font-size: 20px; margin-bottom: 25px; margin-top: 0; padding: 25px 0; text-align: center; text-transform: uppercase; } .price { border: 1px solid #8bc34a; border-radius: 500px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12); display: inline-block; font-family: Roboto,sans-serif; font-size: 14px; height: 124px; line-height: 26px; margin-bottom: 30px; text-transform: uppercase; width: 124px; } .color-one { background: #8bc34a; color: #fff; } .color-two { background: #8bc34a; color: #fff; } .color-three { background: #8bc34a; color: #fff; } .price span { display: block; font-size: 32px; margin-top: 39px; } .pricing-list { border-top: 1px dashed #eee; list-style: outside none none; margin-bottom: 0; text-align: center; } .pricing-list li { border-bottom: 1px dashed #eee; color: #333; font-size: 16px; padding: 10px 15px; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .pricing-list li:hover { background: rgba(0,0,0,0.02); } .pricing-btn { padding: 20px 0; } .pricing-btn button { background: #8bc34a; border: 1px solid #8bc34a; color: #fff; font-family: Roboto,sans-serif; padding: 8px 30px; text-transform: uppercase; -webkit-transition: all 0.2s ease 0s; transition: all 0.2s ease 0s; } .pricing-btn button:hover { background: #333; border: 1px solid #333; color: #fff; } /* * ---------------------------------------------------------------------------------------- * 0.END PRICING DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 0.START TESTIMONIAL DESIGN * ---------------------------------------------------------------------------------------- */ .testimonial_overlay { background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0; padding: 100px 0; } .avatar { width: 80px; margin: 0 auto; } .avatar img { border: 4px solid #fff; border-radius: 50%; width: 120px; } .testimonials_area p { color: #fff; margin: 20px 0px; } .testimonials_area h5 { color: #8bc34a; font-size: 15px; margin-bottom: 2px; text-transform: uppercase; } .testimonials_area a:hover { color: #fff; } .owl-controls { position: absolute; width: 100%; top: 50%; font-size: 16px; } .owl-prev { position: absolute; left: -50px; } .owl-next { position: absolute; right: -50px; } .owl-controls i { font-size: 33px; font-weight: 700; transition: .5s; } .owl-controls i:hover { color: #8bc34a; } /* * ---------------------------------------------------------------------------------------- * 0.END TESTIMONIAL DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * .START COMPANY PARTNER LOGO * ---------------------------------------------------------------------------------------- */ .partner-logo { background: #FFF; } .partner { text-align: center; } .partner img { } /* * ---------------------------------------------------------------------------------------- * .END COMPANY PARTNER LOGO * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 14.START BLOG PAGE DESIGN * ---------------------------------------------------------------------------------------- */ /*START HOME BLOG*/ @media only screen and (max-width:768px) { .home_single_blog { margin-bottom: 30px; } } .home_single_blog img { width: 100%; } .home_blog_text { background: #fff none repeat scroll 0 0 !important; border: 1px solid #eee; padding: 30px; position: relative; z-index: 1; } .home_blog_text i { color: #8bc34a; margin-right: 10px; } .home_blog_text span { color: #8bc34a; text-transform: uppercase; margin-right: 15px; } .home_blog_text h4 { margin: 20px 0; text-transform: uppercase; } .home_blog_text p { margin-bottom: 20px; } .Reccomended{color: green; top: -16px; font-size: 12px; position:absolute;} /*END HOME BLOG*/ /* * ---------------------------------------------------------------------------------------- * .END BLOG PAGE DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * .START PROMOTION DESIGN * ---------------------------------------------------------------------------------------- */ .buy_now { background: #fb8309 none repeat scroll 0 0; padding: 30px 0; } .buy_now_title { color: #fff; font-family: Roboto,sans-serif; font-weight: 300; margin: 0; } @media only screen and (max-width:768px) { .buy_now_title { font-size: 22px; } } @media only screen and (max-width:360px) { .buy_now_title { font-size: 15px; } } .btn-promotion-bg { background: transparent none repeat scroll 0 0; border: 1px solid transparent; border-radius: 2px; box-shadow: 0 11px 11px 0 transparent; color: #fff; font-size: 14px; margin-left: 1%; padding: 0px 0px; transition: all 0.2s ease 0s; } @media only screen and (max-width:480px) { .btn-promotion-bg { margin-left: 0px; margin-top: 20px; } } .btn-promotion-bg:hover, .btn-promotion-bg:focus { background: #fb8309; border: 1px solid #fb8309; color: #333; } /* * ---------------------------------------------------------------------------------------- * .END PROMOTION DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * .START CONTACT DESIGN * ---------------------------------------------------------------------------------------- */ .contact { padding: 0; float: left; width: 97%; padding-right: 10px; } .contact input { background: #fff none repeat scroll 0 0; border: 2px solid rgb(226,226,226); padding-left: 8px !important; border-color: -moz-use-text-color -moz-use-text-color #ddd; border-radius: 5px; border-style: none none solid; box-shadow: none; color: #333; font-family: Roboto,sans-serif; height: 45px; padding: 0; } .contact input::placeholder { color: #242424; } .contact input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #242424; } .contact input::-ms-input-placeholder { /* Microsoft Edge */ color: #242424; } .contact select { background:#fff none repeat scroll 0 0; border: 2px solid rgb(226,226,226); padding-left: 8px !important; border-radius: 5px; border-style: none none solid; box-shadow: none; color: #333; font-family: Roboto,sans-serif; height: 45px; padding: 0; } .ContactRadio { padding-right: 0px; float: left; margin-right: 7px; line-height: 10px; margin-bottom: 10px; } .ContactUsRadio input[type="radio"] { height: auto; float: left; width: auto; margin-right: 7px; margin-top: 0px; } .ContactUsRadio label { height: auto; float: left; width: auto; font-size: 15px; font-weight: 400; line-height: 10px; } .contact textarea { background: #fff none repeat scroll 0 0; width: 100%; transition: none; padding-left: 8px !important; border-color: -moz-use-text-color -moz-use-text-color #ddd; border-radius: 5px; font-family: Roboto,sans-serif; border-style: none none solid; border-width: 0 0 1px; box-shadow: none; padding: 0; color: #333; height: 287px; } .contact input:hover, .contact input:focus { border-bottom: 1px solid #eee; box-shadow: none; outline: 0 none; } .contact input:focus { background:#fff; } .contact textarea:hover { border-bottom: 1px solid #eee; box-shadow: none; outline: 0 none; } .contact textarea:focus { background:#fff; box-shadow: none; outline: 0 none;} .success { background: #f3f3f3 none repeat scroll 0 0; color: #8bc34a; font-weight: 700; padding: 20px; text-align: center; display: none; } .Saprator { float: right; width: 8px; margin-top: -16px; } .Saprator p { top: 65%; background: #f3f3f3; width: 28px; z-index: 1; position: absolute; margin: 0px; padding: 0px; line-height: 22px; } .ContactErrorMsg { color: #fb6b5b; font-size: 14px; margin: 0px; visibility: hidden; padding: 0px 0px 0px 0px; float: left; width: 100%; } .SapratorLine { height:100px; margin-left: 8px; } .SapratorLine img { height: 305px; } .ContactWizBtn { padding-right: 3%; float: left; width: 100%; } .ContactWizBtn a { background: #00c6f7; color: #fff; float: right; padding: 7px 0px; border-radius: 5px; font-size: 15px; text-transform: uppercase; width: 125px; text-align: center; } .contact_address h3 { color: #333; margin: 0 0 15px; text-transform: uppercase; } .contact_address p { color: #333; } .contact_address ul { list-style: none; } .contact_address ul li { color: #333; font-size: 16px; margin-bottom: 10px; font-weight:400; } .contact_address ul li i { background: #fb8309 none repeat scroll 0 0; border-radius: 30px; color: #fff; font-size: 18px; height: 45px; line-height: 45px; margin-right: 20px; text-align: center; width: 45px; } .ContactWats img { background: #f3f3f3 none repeat scroll 0 0; float: left;border-radius: 30px; color: #fff; font-size: 18px; line-height: 45px; margin-right: 20px; text-align: center; padding: 0px; } .btn-contact-bg { background: #fb8309 none repeat scroll 0 0 !important; color: #fff!important; font-family: Roboto,sans-serif; font-size: 14px; padding: 10px 30px !important; text-transform: uppercase; transition: all 0.2s ease 0s; } .btn-contact-bg:hover, .btn-contact-bg:focus { background: #333!important; border-bottom: 1px solid #333!important; color: #fff; } .SuccessMasg { width: 350px; background: #fff; border-radius: 5px; margin: 0 auto; padding: 20px; position: relative; text-align: center; border-radius: 7px; box-shadow: 1px 0px 5px 0px rgba(115,115,115,0.75); -webkit-box-shadow: 1px 0px 5px 0px rgba(115,115,115,0.75); -moz-box-shadow: 1px 0px 5px 0px rgba(115,115,115,0.75); } .SuccessMasg img { width: 68px; margin-top: -56px; } .SuccessMasg a { background: #4caf50; color: #fff; width: 98%; padding: 10px; margin-top: 10px; display: inline-block; border-radius: 5px; } .CofirmText { text-align: left; padding-left: 15px; font-weight: 400; line-height: 23px; } .ContactTxtEror { border: 2px solid rgb(255, 59, 72); } .Largewidth { display:block; } .SmallSize { display: none; } .FeedBackMain { margin-top: -30px; } .FeedBackMainText { margin-top: -30px; } #FeedBackLoading { margin-top: 51px; right: 50% !important; } .ContactHeder { float: right; padding-top: 15px; } .ContactHeder img { width: 36px; margin-left: 7px; float: left; margin-top: 1px; } .ContactHeder a { float: left; text-align: left; padding-top: 3px; padding-left: 12px; line-height: 21px; } /* * ---------------------------------------------------------------------------------------- * .END CONTACT DESIGN * ---------------------------------------------------------------------------------------- */ #map { height: 400px; } /* * ---------------------------------------------------------------------------------------- * 18.START FOOTER DESIGN * ---------------------------------------------------------------------------------------- */ .footer { background-color: #171B1E; padding-bottom: 6px; padding-top: 15px; } .footer .container { line-height: 35px; } .footer img { padding-bottom: 30px; width: 80px; } /*START FOOTER SOCIAL DESIGN*/ .footer_social { margin-bottom: 30px; display: none; } .footer_social ul { list-style: outside none none; margin: 0; padding: 0; } .footer_social ul li { display: inline-block; } .footer_social ul li a { background: #1f2428 none repeat scroll 0 0; border: 1px solid #1f2428; border-radius: 4px; color: #fff; display: block; font-size: 14px; height: 40px; line-height: 20px; margin: 2px; padding: 9px 12px; transition: all 0.2s ease 0s; width: 40px; } @media only screen and (max-width:992px) { .Saprator { display: none} } @media only screen and (max-width:768px) { .footer_social ul li a { font-size: 12px; } .Hidenfeilds { display: none; } .SapratorLine { display: none; } .Saprator { width: 100%; margin-top: 0px; margin-bottom: 10px; text-align: left; } .ContactWizBtn { padding-right: 6%; } #portfolio img { width: 100%; } #SuccessMasg { text-align: center; display: flex; } .Saprator p { position: relative; } .SapratorLine img { height: auto; width:100%; -ms-transform: rotate(80deg); /* IE 9 */ transform: rotate(90deg); } #SubsAddDetails { display:none } .Largewidth { display:none; } .SmallSize { display: block; } .FeedBackMainText { margin-top: 0px; } #ContactLoading { right: 58% !important; } #FeedBackLoading { margin-top: 51px !important; right: 50% !important;} .ContactUsRadio { margin-bottom:25px; } } @media only screen and (max-width:360px) { .footer_social ul li a { font-size: 14px; } .TopHeaderMain { padding: 0px !important; } .ContactHeder a { padding-left: 7px; } .ContactHeder { float: left; } } .footer_social ul li a:hover { color: #fff; } .f_facebook:hover { background: #5D82D1; border: 1px solid #5D82D1; } .f_twitter:hover { background: #40BFF5; box-shadow: 0 0 0 0px #40BFF5; border: 1px solid #40BFF5; } .f_google:hover { background: #EB5E4C; box-shadow: 0 0 0 0px #EB5E4C; border: 1px solid #EB5E4C; } .f_linkedin:hover { background: #238CC8; box-shadow: 0 0 0 0px #238CC8; border: 1px solid #238CC8; } .f_youtube:hover { background: #CC181E; box-shadow: 0 0 0 0px #CC181E; border: 1px solid #CC181E; } .f_skype:hover { background: #00AFF0; box-shadow: 0 0 0 0px #00AFF0; border: 1px solid #00AFF0; } /*END FOOTER SOCIAL DESIGN*/ .footer_content p { border-top: 1px solid #282828; color: #fff; font-family: Roboto,sans-serif; font-size: 14px; margin: 0; padding-top: 30px; } /* * ---------------------------------------------------------------------------------------- * 18.END FOOTER DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 19.START SECTION TOP DESIGN * ---------------------------------------------------------------------------------------- */ .section-top { background-size: cover; background-position: center; background-attachment: fixed; } .section-top-title h2 { color: #fff; font-size: 45px; margin: 0; text-transform: uppercase; } @media only screen and (max-width:320px) { .section-top-title h2 { font-size: 40px; } } .section-top-title { padding-bottom: 90px; padding-top: 150px; } .section-top-title, .breadcrumb { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; margin-bottom: 0; } .section-top-title ol li { color: #fff!important; } .section-top-title ol li a { color: #fff!important; } .section-top-title ol li a:hover { color: #8bc34a!important; } /* * ---------------------------------------------------------------------------------------- * 19.END SECTION TOP DESIGN * ---------------------------------------------------------------------------------------- */ /* * ---------------------------------------------------------------------------------------- * 20.Single PORTFOLIO DESIGN * ---------------------------------------------------------------------------------------- */ .about_project { margin-bottom: 20px; } .about_project_details ul { list-style: none; } .about_project_details ul li i { padding-right: 10px; } .about_project_details ul li { padding-bottom: 8px; } .about_project_details { margin-bottom: 20px; } .related_porject { padding-bottom: 30px; } @media screen and (min-width: 100px) and (max-width: 990px) { .buy_now_title a { margin-left: 12%; } .New-modal { width: 80% !important; } .single-slide-item:after { top: 70%; } .single-slide-item h2 { font-size: 25px; margin-top: 88% !important; } .contact_address ul li i { margin-right: 10px; } .feature { padding-bottom: 0px; } .navbar-brand img { width: 75px; margin-left: 10px; margin-top: -8px; } .DefaultPage .overlay nav { width: 300px !important; } .DefaultPage .overlay select { height: 40px !important; margin-bottom: 25px !important; } .clsStep2OR { margin-top: 6px !important; margin-bottom: 6px !important; } .clsStep2txtbox { height: 35px !important; } .bhoechie-tab-content .col-xs-6 { width: 43%; } } @media screen and (min-width: 100px) and (max-width: 1200px) { /*Quick Pay and footer*/ #PW { font-size: 12px; } #TC div { font-size: 11px; } #QuickPay { padding: 85px 0px !important; padding-bottom: 5px !important; } #mainDetailDiv { width: 95% !important; } #mainDetailDiv .container { width: 100% !important; } #QPTitle { margin-top: 0px !important; margin-bottom: 0px !important; } .clsDetailDiv { border-right: 0px !important; width: 100%; } .clsPayBtn { text-align: center !important; width: 100%; margin-top: 10px; } .clsIsReg { width: 100%; padding: 0px; text-align: center; } #DisclaimerPage { height: auto !important; } .bhoechie-tab { padding-left: 0px; padding-right: 0px; } div.bhoechie-tab-content { padding-left: 0px !important; padding-top: 30px !important; } .bhoechie-tab .row-padding { padding-right: 0px; padding-left: 0px; } .bhoechie-tab .col-xs-6 { padding-right: 0px; padding-left: 0px; } .bhoechie-tab .col-xs-5 { font-size: 15px; } .DefaultPage .clsOverlay nav { width: 270px !important; } } @media screen and (min-width: 100px) and (max-width: 550px) { .EnterAmount{ padding-top: 0px !important; line-height: 19px;} .EnterAmountTxt{ padding: 10px 0px 8px 16px;} div.bhoechie-tab-content { padding-left: 0px !important; padding-top: 0px !important;} .SelectPayment{ padding-top:5px !important;} #QuickPay { padding: 61px 0px !important; padding-bottom: 5px !important;} .EnterAmountMain{ line-height:0 !important;} .AdressDiv{ padding-bottom:17px !important;} .ContactDetailDiv{ height: 82px !important} .ContactDetailDiv2{ height: 70px !important} .ConfirmPayment { text-align:left !important; padding-left: 15px; } } .modal.modal-fixed-footer .modal-content { text-align: justify; } .clear { clear: both; } .text-right { text-align: right; } #TC div { padding: 5px; float: right; list-style-type: none; } #TC div a { color: #FFF; cursor: pointer; } #PW { padding-top: 3px; } #PW a { color: #FFF; } .New-modal { background: rgb(255, 255, 255); width: 50%; margin: 5% auto auto; max-height: 400px; overflow-y: hidden !important; padding-right: 0px !important; } .New-modal .modal-content { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; margin-top: 2px; text-align: justify; box-shadow: none; border: none; max-height: 350px; overflow: auto; padding: 10px; } .New-modal .modal-content ul li { font-size: 13px; } .New-modal .modal-footer { padding: 6px !important; } .New-modal .modal-footer button { background: #fb8309; color: #FFF; } .New-modal .modal-dialog { width: 100%; margin: 0px auto; } #contact { background: #f3f3f3; } .partner_overlay img { margin-left: 8%; } .contact_area input[type="submit"] { width: 100%; } .partner-logo img { height: 70px; width: 80px; } #QuickPay { padding: 120px 0px; } #mainDetailDiv { border-radius: 6px; -moz-border-radius:6px; -webkit-box-shadow: 1px 1px 5px 1px rgba(199,199,199,1); -moz-box-shadow: 1px 1px 5px 1px rgba(199,199,199,1); box-shadow: 1px 1px 5px 1px rgba(199,199,199,1); padding: 0px; } .clsDetailDiv { border-right: 1px solid #b7b2b2; border-bottom: 1px solid #b7b2b2; } .clsMidDiv { float: left; width: 2%; padding: 8px; } .clsRightDiv { float: left; padding: 8px; } /*For Quick Pay*/ .DefaultPage #container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; width: 100px; } .DefaultPage #overlay-menu { width: 100px; height: 50px; } .DefaultPage .menuButton { background-color: #7a7a7a; text-indent: 0; border: 1px solid #000; color: #fff; font-size: 15px; font-weight: bold; } .DefaultPage .menuButton:hover { background-color: #474747; } .DefaultPage .menuButton:active { position: relative; top: 1px; } .DefaultPage .overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.73); } .DefaultPage .overlay nav { position: relative; margin: auto; top: 20%; min-height: 280px; width: 500px; background: #fb8309; padding: 10px; padding-top: 0px; padding-bottom: 20px; border-radius: 10px; } /*.DefaultPage .overlay nav { position: relative; margin: auto; top: 20%; min-height: 300px; width: 500px; background: #efefef; padding: 10px; padding-top: 0px; padding-bottom: 20px; border: 2px solid #fb8309; }*/ .DefaultPage .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; width: 100%; position: relative; } .DefaultPage .overlay ul li a { text-decoration: none; display: block; color: #FFF; list-style: none; float: right; margin-top: 5px; } .DefaultPage .overlay-close { right: 35px; font-size: 18px; color: #FFF; } .DefaultPage .overlay-data { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; } .DefaultPage .overlay-open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; z-index: 9999; } .DefaultPage .overlay select { border: none; height: 3em; width: 100%; outline: none; margin-bottom: 0px; text-indent: 10px; color: #ffffff; border-bottom: 1px #fff solid; background: #fb8309; font-size: 15px; text-indent:-1.5px; } .DefaultPage .overlay select option { background-color:#ffffff; color:#242424 } /*For Quick Pay STB SmartCard Details Pay*/ .DefaultPage #container { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 50px; width: 100px; } .DefaultPage #overlay-menu { width: 100px; height: 50px; } .DefaultPage .menuButton { background-color: #7a7a7a; text-indent: 0; border: 1px solid #000; color: #fff; font-size: 15px; font-weight: bold; } .DefaultPage .menuButton:hover { background-color: #474747; } .DefaultPage .menuButton:active { position: relative; top: 1px; } .DefaultPage .clsOverlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0, 0, 0, 0.73); } .DefaultPage .clsOverlay nav { position: relative; margin: auto; top: 20%; min-height: 300px; width: 375px; background: #fb8309; padding: 10px; padding-top: 0px; padding-bottom: 20px; max-height: 300px; overflow: auto; } .DefaultPage .clsOverlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; width: 100%; position: relative; } .DefaultPage .clsOverlay ul li a { text-decoration: none; display: block; color: #FFF; list-style: none; float: right; margin-top: 5px; } .DefaultPage .clsOverlay-close { right: 35px; font-size: 18px; color: #FFF; } .DefaultPage .clsOverlay-data { opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; } .DefaultPage .clsOverlay-open { opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s; z-index: 9999; } .DefaultPage .clsOverlay select { border: none; height: 45px; width: 100%; outline: none; margin-bottom: 25px; text-indent: 10px; box-shadow: 0px 1px 4px 1px rgb(175, 175, 175); color: #7b7878; } .NoPendingBills { margin: 58px 0px 44px 0px; width: 100%; text-align: center; display: none; } .NoPendingBills img { margin:0 auto;} .NoPendingrenewals { margin: 58px 0px 44px 0px; width: 100%; text-align: center; display: none; } .NoPendingrenewals img { margin:0 auto;} /*Css By Devendra*/ .PaymentSubsDetails { margin: 0 auto; background: #fff; width: 830px; margin-top: 4%; border-radius: 10px; } .DetailsMain { float: left; background: #fbfbfb; width: 100%; position: relative; border-radius: 10px; overflow-y: scroll; height: 500px; } .LeftDtails { background: #fb8309 !important; max-height: 500px; min-height: 300px; position: fixed; -webkit-box-shadow: 3px 0px 7px -5px rgba(0,0,0,0.75); border-right: 1px solid #bfb9b9; -moz-box-shadow: 3px 0px 7px -5px rgba(0,0,0,0.75); box-shadow: 3px 0px 7px -5px rgba(0,0,0,0.75); width: 250px; height: 100%; border-radius: 10px 0px 0px 10px; float: left; } .DefaultPage .overlay ul { list-style: none; padding: 0; margin: 0 auto; display: inline-block; width: 100%; position: relative; } .LeftDtails ul { padding: 30px 30px 0px 30px !important; } .LeftDtails ul li { color: #fff; border-bottom: 1px solid #ffffff40; line-height: 2; } .LeftDtails ul li:last-child { border-bottom: none; } .LeftDtails ul li h4 { color: #fff; padding-bottom: 7px; font-weight: 300; font-size: 16px; } .leftDueamountmain h4 { color: #de3030 !important; font-weight: 600 !important; } .LeftDtails ul li h5 { color: #4f4f4f; padding-bottom: 7px; font-size: 17px; } .RightDetails { float: left; width: 579px; margin-left: 30%;} .DueDateTop { border-bottom: 1px solid #e4e4e4; width: 100%; float: left; } .DueDateTop p { text-align: left; padding: 10px 16px 9px 16px; color: #005a95; font-size: 15px; font-weight: 300; float: left; margin: 0px; } .DefaultPage .overlay-close { right: 35px; font-size: 18px; color: #FFF; width: 100%; text-align: right; float: right; } .DueDateTop a { color: #000 !important; padding-right: 15px !important; width: auto !important; padding: 10px 0px 0px 0px; } .PaymentSteps { width: 100% !important; } #modal1 { overflow-y: visible; width: 360px; max-height: 100%; float: left; margin-top: 12px; } .selPayMode { margin-top: 0px !important; } .QuickPayBack { margin: 0px; width: auto !important; top: -26px; color: #242424 !important; position: absolute; left: 7px; font-size: 18px !important; margin-top: 0px !important; } .QuickPayBack i { font-size:20px; } .PaymentFormdetails { float: left; width: 40%; } .SmalClosebtn { display: none; } .MobileviewMain { width: 100%; margin-top: 10px; } .RedioBtnMob { display: inline-block; width: 49%; } .Mobileview-label { position: relative; } .Mobileview + .Mobileview-label:before { content: ''; background: #fff; border: 2px solid #ddd; display: inline-block; vertical-align: middle; width: 20px; height: 20px; padding: 2px; margin-right: 10px; text-align: center; border-radius: 50%; } .Mobileview:checked + .Mobileview-label:before { content: "\f26b"; font-family: 'Material-Design-Iconic-Font'; font-size: 12px; color: #ffffff; padding: 0px; border: 2px solid #8BC34A; background: #8BC34A; font-weight: 900; } .Mobileview, .Mobileview-label, .Mobileview, .Mobileview-label { display: inline-block; vertical-align: middle; cursor: pointer; text-align: left; line-height: 18px; } .Mobileview { opacity: 0; position: absolute; } #RegisterPayTv { padding: 0px 14px; color: rgb(55, 55, 55); margin: 0px; font-size: 13px; } #RegisterPayTv p { line-height: 1; display: inline-block; margin: 0px; float: left; margin-top: 13px; color: #373737; font-size: 13px; } .leftDueamountmain { background: #fbfbfb; position: absolute; width: 100%; text-align: center; padding: 6px 14px 0px 14px; margin-left: -30px; margin-top: -30px; border-radius: 10px 0px 0px 0px;} .leftDueamountmain h4 { color: #de3030 !important; font-weight: 400 !important; } .QuickPayInner { position: relative; float: left; width: 96%; } .QuickPayMianDiv input[type=text], input[type=password], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], textarea.materialize-textarea { background-color: transparent; border: none; border-bottom: 1px solid #fff; border-radius: 0; outline: none; height: 3rem; width: 100%; font-size: 14px; margin: 0 0 0px 0; padding: 0; box-shadow: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; transition: all .3s; font-weight:300; color:#242424 } .QuickPayMianDiv input[type=text]:disabled, input[type=text][readonly="readonly"], input[type=password]:disabled, input[type=password][readonly="readonly"], input[type=url]:disabled, input[type=url][readonly="readonly"], input[type=time]:disabled, input[type=time][readonly="readonly"], input[type=date]:disabled, input[type=date][readonly="readonly"], input[type=datetime-local]:disabled, input[type=datetime-local][readonly="readonly"], input[type=tel]:disabled, input[type=tel][readonly="readonly"], input[type=number]:disabled, input[type=number][readonly="readonly"], input[type=search]:disabled, input[type=search][readonly="readonly"], textarea.materialize-textarea:disabled, textarea.materialize-textarea[readonly="readonly"] { color:#fff; border-bottom: 1px dotted #fff; } .QuickPayMianDiv input[type=text]:disabled + label, input[type=text][readonly="readonly"] + label, input[type=password]:disabled + label, input[type=password][readonly="readonly"] + label, input[type=url]:disabled + label, input[type=url][readonly="readonly"] + label, input[type=time]:disabled + label, input[type=time][readonly="readonly"] + label, input[type=date]:disabled + label, input[type=date][readonly="readonly"] + label, input[type=datetime-local]:disabled + label, input[type=datetime-local][readonly="readonly"] + label, input[type=tel]:disabled + label, input[type=tel][readonly="readonly"] + label, input[type=number]:disabled + label, input[type=number][readonly="readonly"] + label, input[type=search]:disabled + label, input[type=search][readonly="readonly"] + label, textarea.materialize-textarea:disabled + label, textarea.materialize-textarea[readonly="readonly"] + label { color: #000; } .QuickPayMianDiv input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 1px solid #fff; box-shadow: 0 1px 0 0 #fff; } .QuickPayMianDiv input[type=text]:focus:not([readonly]) + label, input[type=password]:focus:not([readonly]) + label, input[type=url]:focus:not([readonly]) + label, input[type=time]:focus:not([readonly]) + label, input[type=date]:focus:not([readonly]) + label, input[type=datetime-local]:focus:not([readonly]) + label, input[type=tel]:focus:not([readonly]) + label, input[type=number]:focus:not([readonly]) + label, input[type=search]:focus:not([readonly]) + label, textarea.materialize-textarea:focus:not([readonly]) + label { color: #fff; } .QuickPayMianDiv input[type=text].valid, input[type=text]:focus.valid, input[type=password].valid, input[type=password]:focus.valid, input[type=url].valid, input[type=url]:focus.valid, input[type=time].valid, input[type=time]:focus.valid, input[type=date].valid, input[type=date]:focus.valid, input[type=datetime-local].valid, input[type=datetime-local]:focus.valid, input[type=tel].valid, input[type=tel]:focus.valid, input[type=number].valid, input[type=number]:focus.valid, input[type=search].valid, input[type=search]:focus.valid, textarea.materialize-textarea.valid, textarea.materialize-textarea:focus.valid { border-bottom: 1px solid #00E676; box-shadow: 0 1px 0 0 #00E676; } .QuickPayMianDiv input[type=text].valid + label:after, input[type=text]:focus.valid + label:after, input[type=password].valid + label:after, input[type=password]:focus.valid + label:after, input[type=url].valid + label:after, input[type=url]:focus.valid + label:after, input[type=time].valid + label:after, input[type=time]:focus.valid + label:after, input[type=date].valid + label:after, input[type=date]:focus.valid + label:after, input[type=datetime-local].valid + label:after, input[type=datetime-local]:focus.valid + label:after, input[type=tel].valid + label:after, input[type=tel]:focus.valid + label:after, input[type=number].valid + label:after, input[type=number]:focus.valid + label:after, input[type=search].valid + label:after, input[type=search]:focus.valid + label:after, textarea.materialize-textarea.valid + label:after, textarea.materialize-textarea:focus.valid + label:after { content: attr(data-success); color: #00E676; opacity: 1; } .QuickPayMianDiv input[type=text].invalid, input[type=text]:focus.invalid, input[type=password].invalid, input[type=password]:focus.invalid, input[type=email].invalid, input[type=url]:focus.invalid, input[type=time].invalid, input[type=time]:focus.invalid, input[type=date].invalid, input[type=date]:focus.invalid, input[type=datetime-local].invalid, input[type=datetime-local]:focus.invalid, input[type=tel].invalid, input[type=tel]:focus.invalid, input[type=number].invalid, input[type=number]:focus.invalid, input[type=search].invalid, input[type=search]:focus.invalid, textarea.materialize-textarea.invalid, textarea.materialize-textarea:focus.invalid { border-bottom: 1px solid #FF1744; box-shadow: 0 1px 0 0 #FF1744; } .QuickPayMianDiv input[type=text].invalid + label:after, input[type=text]:focus.invalid + label:after, input[type=password].invalid + label:after, input[type=password]:focus.invalid + label:after, input[type=url].invalid + label:after, input[type=url]:focus.invalid + label:after, input[type=time].invalid + label:after, input[type=time]:focus.invalid + label:after, input[type=date].invalid + label:after, input[type=date]:focus.invalid + label:after, input[type=datetime-local].invalid + label:after, input[type=datetime-local]:focus.invalid + label:after, input[type=tel].invalid + label:after, input[type=tel]:focus.invalid + label:after, input[type=number].invalid + label:after, input[type=number]:focus.invalid + label:after, input[type=search].invalid + label:after, input[type=search]:focus.invalid + label:after, textarea.materialize-textarea.invalid + label:after, textarea.materialize-textarea:focus.invalid + label:after { content: attr(data-error); color: #FF1744; opacity: 1; } .QuickPayMianDiv input[type=text] + label:after, input[type=password] + label:after, input[type=url] + label:after, input[type=time] + label:after, input[type=date] + label:after, input[type=datetime-local] + label:after, input[type=tel] + label:after, input[type=number] + label:after, input[type=search] + label:after, textarea.materialize-textarea + label:after { display: block; content: ""; position: absolute; top: 65px; opacity: 0; transition: .2s opacity ease-out, .2s color ease-out; } .QuickPayMianDiv { position: relative; margin-top: 0px; } .QuickPayMianDiv label { color: #fff; position: absolute; top: -5px; left: 0.75rem; font-size: 14px; cursor: text; -webkit-transition: 0.2s ease-out; -moz-transition: 0.2s ease-out; -o-transition: 0.2s ease-out; -ms-transition: 0.2s ease-out; transition: 0.2s ease-out; font-weight:300; } .QuickPayMianDiv label.active { font-size: 14px; -webkit-transform: translateY(-104%); -moz-transform: translateY(-104%); -ms-transform: translateY(-104%); -o-transform: translateY(-104%); transform: translateY(-104%); } .QuickPayMianDiv .prefix { position: absolute; width: 3rem; font-size: 3rem; -webkit-transition: color 0.2s; -moz-transition: color 0.2s; -o-transition: color 0.2s; -ms-transition: color 0.2s; transition: color 0.2s; color:#fff;} .QuickPayMianDiv .prefix.active { color: #ff8c1a; } .QuickPayMianDiv .prefix ~ input, .input-field .prefix ~ textarea { margin-left: 39px; width: 92%; width: calc(100% - 3rem); } .QuickPayMianDiv .prefix ~ textarea { padding-top: .8rem; } .QuickPayMianDiv .prefix ~ label { margin-left: 3rem; } .RightDetails input[type=text], input[type=url], input[type=time], input[type=date], input[type=datetime-local], input[type=tel], input[type=number], textarea.materialize-textarea { background-color: transparent; border: none; border-bottom: 1px solid #9e9e9e; border-radius: 0; outline: none; height: 3rem; width: 100%; font-size: 14px; margin: 0 0 0px 0; padding: 0; box-shadow: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; transition: all .3s; padding-left: 7px; color: #000; } .RightDetails input[type=text]:focus:not([readonly]), input[type=password]:focus:not([readonly]), input[type=email]:focus:not([readonly]), input[type=url]:focus:not([readonly]), input[type=time]:focus:not([readonly]), input[type=date]:focus:not([readonly]), input[type=datetime-local]:focus:not([readonly]), input[type=tel]:focus:not([readonly]), input[type=number]:focus:not([readonly]), input[type=search]:focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 1px solid #fb8309 !important; box-shadow: 0 1px 0 0 #fb8309 !important; } .RightDetails select.browser-default { display: block; border-bottom: 1px solid #5a5a5a; box-shadow: none !important; } .error { color: #9b0000; font-size: 11px !important; } .RightDetails .input-field { position: relative; margin-top: 1rem; margin-left: 25px; } .PaymentError { color: red; font-size: 14px; } .RightDetails select { border: none !important; height: 45px !important; width: 100% !important; padding: 0px !important; outline: none !important; margin-bottom: 25px !important; text-indent: 5px !important; color: #7b7878 !important; border-bottom: 1px solid #9e9e9e !important; box-shadow: none !important; } .yelow { background-color: rgb(252, 128, 2) !important; color: #fff; } .ButonBlue { background-color: #00c6f7 !important; color: #fff; border-radius: 5px; border: none; text-transform: uppercase !important; } .ButonBlue:hover { background-color: #00c6f7 !important; color: #fff; } .btn-default:active:focus, .ButonBlue:focus {color: #fff !important; } .QickPayLink { padding: 10px; font-size: 15px; color: #000; text-align: center; margin-top: 28px; color: #0099fd; cursor: pointer; color: #fff; background: linear-gradient(360deg,#ffcc5a,#ffb612) !important; padding: 4px 0px; border-radius: 6px; font-weight: 500; font-size: 17px; -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 2px 4px 0px rgba(76, 76, 76, 0.75); } .QickPayLink a { text-decoration: none; color: #fff; } .QickPayLink img { width: 34px; } .QickPayLink p { font-size: 12px; margin: 0px; } .QickPayLink a:hover { text-decoration: none; } .ContinueBtn { position: absolute; bottom: 4px; text-align: right; padding: 0px 20px; width: 100%; color: #fff; display: none; } #coformation { font-size: 12px; float: left; background-color: #d4d4d4; padding: 8px; text-align: justify; display: block; line-height: 17px; color: #000; width: 100%;} .input_wrapper { width: auto; height: auto; position: relative; cursor: pointer; } .input_wrapper input[type="checkbox"]:checked { background: #8bc34a; } .input_wrapper input[type="checkbox"]:checked:after { left: calc(100% - 25px); } .input_wrapper input[type="checkbox"] { width: 49px; height: 24px; margin-top: 6px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #ccc; border-radius: 34px; position: relative; outline: 0; -webkit-transition: all .2s; transition: all .2s; -webkit-box-shadow: 0px 0px 3px 0px rgba(153,153,153,1); -moz-box-shadow: 0px 0px 3px 0px rgba(153,153,153,1); box-shadow: 0px 0px 5px 0px rgb(146, 144, 144); } .input_wrapper input[type="checkbox"]:after { position: absolute; content: ""; top: 4px; left: 5px; width: 17px; height: 17px; background: #fff; z-index: 2; border-radius: 57%; -webkit-transition: all .35s; transition: all .35s; } .input_wrapper input[type="checkbox"]:checked + .is_checked { -webkit-transform: translateX(0) translateY(-30%) scale(1); transform: translateX(0) translateY(-30%) scale(1); } .input_wrapper .is_checked { width: 13px; left: 10%; -webkit-transform: translateX(190%) translateY(-30%) scale(0); transform: translateX(190%) translateY(-30%) scale(0); top: 15px; } .input_wrapper input[type="checkbox"]:checked ~ .is_unchecked { -webkit-transform: translateX(-190%) translateY(-30%) scale(0); transform: translateX(-190%) translateY(-30%) scale(0); } .input_wrapper .is_unchecked { width: 10px; right: 19%; top: 45%; -webkit-transform: translateX(0) translateY(-30%) scale(1); transform: translateX(0) translateY(-30%) scale(1); top: 15px; } .input_wrapper svg { position: absolute; top: 44%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; fill: #fff; -webkit-transition: all .35s; transition: all .35s; z-index: 1; } /*Amount Info CSS Start*/ .AmountInfo { width:15px; float:right; margin-top: 7px; margin-top: 11px; margin-left: 5px; } .AmountInfoPopup { position: absolute; display: none; width: 200px; right: -10px; top: -48px; background: #69cd92; color: #242424; padding: 2px 10px; border-radius: 6px; font-size: 13px; } .AmountInfotxt { padding: 2px 0px; line-height: 20px; } .AmountInfo:hover + .AmountInfoPopup { display: block; color: #242424; } .AmountInfoPopup::after { content: ""; position: absolute; top: 100%; right: 6%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #69cd92 transparent transparent transparent; } .leftDueamountPostmain { background: #f2f2f2; position: absolute; width: 100%; text-align: center; padding: 6px 0px 0px 0px; margin-left: -30px; margin-top: -30px; border-radius: 10px 0px 0px 0px; } .leftDueamountPostmain .post_heading { font-size: 15px; text-align: center; color: #000; line-height: 0px; padding-bottom: 13px; padding-top: 13px; font-weight: 400; } .bill_detals { display: flex; justify-content: space-between; line-height: 20px; padding: 0px 14px; color: #000; font-size: 12px; } .bill_amount { text-align: center; margin: 0px; padding-top: 10px; font-size: 20px; color: red; } .post_arrow_icon { text-align: right; line-height: 9px; font-size: 13px; color: #fb8309; cursor: pointer; padding: 0px 14px 5px 0px; } .unbilled_amonut { width:100%; color: #000; padding: 0px 14px; background: #fff } .unbilled_amonut h3 { text-align: center; margin: 0px; font-size: 14px; font-weight: 400; padding-top: 5px; padding-bottom: 4px; } .unbilled_amonut_dt { color: #000; display: flex; justify-content: space-between; line-height: 17px; font-size: 12px; } .next_bill_date { padding: 10px 0px; width: 100%; } .margin { margin-top: 127px !important; } .nomargin { margin-top: 167px !important; } .nomarginmob { margin-top: 210px !important; } /*.overflowy { overflow-y: inherit; }*/ .overflow_hide { overflow-y:hidden; } .info_post_icon { width: 13px; margin-top: -3px; } /*Css By Devendra*/ .AdvanceInfo:hover + .AdvanceInfoDt { display:block } .AdvanceInfoDt { display: none; width: auto; text-align: center; z-index: 5; border-radius: 5px; position: absolute; background-color: #efefef; color: #373737; -webkit-box-shadow: 1px 0px 5px 0px rgba(76,175,80,1); -moz-box-shadow: 1px 0px 5px 0px rgba(76,175,80,1); box-shadow: 1px 0px 5px 0px rgba(76,175,80,1); top: 25px; right: -10px; font-size: 12px; line-height: 19px; padding: 4px 4px 1px 4px; } .AdvanceInfoDt:after { content: ""; position: absolute; bottom: 100%; right: 8px; margin-left: -21px; border-width: 7px; border-style: solid; border-color: transparent transparent #4caf50 transparent; } .clear { clear: both; } .clsContinue { font-size: 14px; visibility: visible; width: 126px; } .clsBack { font-size: 18px; float: left !important; width: 50%; } .step-1 { display: none; } .step-2 { display: none; } .IDStep .btn-default { color: #ffffff; background-color: #00c6f7; border-color: #00c6f7; border-radius: 5px; margin-top: 11px; width: 126px; } .clsStep2txtbox { width: 100%; outline: none; border: none; text-indent: 10px; height: 40px; border: 1px solid; border-color: #bdbdbd; color: #777777; } /*box-shadow: 0px 1px 4px 1px rgb(175, 175, 175);*/ .clsStep2OR { text-align: center; color: #FFF; margin-top: 13px; margin-bottom: 0px; float: left; width: 100%; } .innerDiv { width: 90%; margin: auto; } /*.step-2 .innerDiv { margin-top: 15px; }*/ .GeogDetError { visibility:hidden; margin: 2px 0px 2px 4px; color: #9b0000; font-size: 14px !important;} .float-left { float: left; } .Step2Error1 { color: #9b0000; font-weight: 300; visibility: hidden;text-align:left; font-size:14px; margin-left: 39px;} .Step2Error2 { color: #9b0000; font-weight: 300; visibility: hidden;text-align:left;height: 10px; font-size:14px; margin-left: 40px;} .Step2Error3 { color: #9b0000; font-weight: 300; visibility: hidden;text-align:left;height: 10px; font-size:14px; margin-left: 40px;} .Step2Error4 { color: #9b0000; font-weight: 300; visibility: hidden;text-align:left; font-size:14px; margin-left: 40px;} .Step2Error { color: #9b0000; font-weight: 300; visibility: hidden; font-size: 14px; } .Step6Error1 { color: #9b0000; font-weight: 300; visibility: hidden;text-align:center;font-size: 14px; } /*For Quick Pay Loading*/ .sk-fading-circle { width: 18px; height: 30px; position: relative; display: none; } #contact .sk-fading-circle { width: 18px; height: 30px; position: relative; right: 33.4%; display: none; } .sk-fading-circle .sk-circle { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } .sk-fading-circle .sk-circle:before { content: ''; display: block; margin: 0 auto; width: 15%; height: 15%; background-color: #FFF; border-radius: 100%; -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; animation: sk-circleFadeDelay 1.2s infinite ease-in-out both; } #contact .sk-fading-circle .sk-circle:before { background-color: #000; } .sk-fading-circle .sk-circle2 { -webkit-transform: rotate(30deg); -ms-transform: rotate(30deg); transform: rotate(30deg); } .sk-fading-circle .sk-circle3 { -webkit-transform: rotate(60deg); -ms-transform: rotate(60deg); transform: rotate(60deg); } .sk-fading-circle .sk-circle4 { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .sk-fading-circle .sk-circle5 { -webkit-transform: rotate(120deg); -ms-transform: rotate(120deg); transform: rotate(120deg); } .sk-fading-circle .sk-circle6 { -webkit-transform: rotate(150deg); -ms-transform: rotate(150deg); transform: rotate(150deg); } .sk-fading-circle .sk-circle7 { -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } .sk-fading-circle .sk-circle8 { -webkit-transform: rotate(210deg); -ms-transform: rotate(210deg); transform: rotate(210deg); } .sk-fading-circle .sk-circle9 { -webkit-transform: rotate(240deg); -ms-transform: rotate(240deg); transform: rotate(240deg); } .sk-fading-circle .sk-circle10 { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } .sk-fading-circle .sk-circle11 { -webkit-transform: rotate(300deg); -ms-transform: rotate(300deg); transform: rotate(300deg); } .sk-fading-circle .sk-circle12 { -webkit-transform: rotate(330deg); -ms-transform: rotate(330deg); transform: rotate(330deg); } .sk-fading-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } .sk-fading-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; } .sk-fading-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; } .sk-fading-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; } .sk-fading-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; } .sk-fading-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; } .sk-fading-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; } .sk-fading-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; } .sk-fading-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; } .sk-fading-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; } .sk-fading-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; } @-webkit-keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } @keyframes sk-circleFadeDelay { 0%, 39%, 100% { opacity: 0; } 40% { opacity: 1; } } /*Quick Pay Payment Screen*/ /* bhoechie tab */ div.bhoechie-tab-container { z-index: 10; background-color: #ffffff; padding: 0 !important; background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); } div.bhoechie-tab-menu { padding-right: 0; padding-left: 0; padding-bottom: 0; } div.bhoechie-tab-menu div.list-group { margin-bottom: 0; } div.bhoechie-tab-menu div.list-group > a { margin-bottom: 0; } div.bhoechie-tab-menu div.list-group > a .glyphicon, div.bhoechie-tab-menu div.list-group > a .fa { color: #fb8309; font-size: 25px; } div.bhoechie-tab-menu div.list-group > a:first-child { border-top-right-radius: 0; -moz-border-top-right-radius: 0; } div.bhoechie-tab-menu div.list-group > a:last-child { border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; } div.bhoechie-tab-menu div.list-group > a.active, div.bhoechie-tab-menu div.list-group > a.active .glyphicon, div.bhoechie-tab-menu div.list-group > a.active .fa { background-color: #fb8309; color: #ffffff; border-color: #FFF; border-radius: 0px; } div.bhoechie-tab-menu div.list-group > a.active:after { content: ''; position: absolute; left: 100%; top: 50%; margin-top: -13px; border-left: 0; border-bottom: 13px solid transparent; border-top: 13px solid transparent; border-left: 10px solid #fb8309; } div.bhoechie-tab-content { background-color: #ffffff; /* border: 1px solid #eeeeee; */ padding-left: 20px; padding-top: 10px; } div.bhoechie-tab div.bhoechie-tab-content:not(.active) { display: none; } .list-group-item:first-child { border-top-left-radius: 0px !important; } .bhoechie-tab { font-size: 16px; color: #636363; } .row-padding { padding-top: 17px; padding-bottom: 0px; } .border-top { border-top: 1px solid #9a9a9a; border-top-style: dashed; } .QuickPayIslimit { display: none; } .QuickPayIslimit input[type="text"] { text-indent: 10px; width: 100%; } .ConviDisplay { display: block; } @font-face { font-family: "Material-Design-Icons"; src: Url("../../font/material-design-icons/Material-Design-Icons.ttf"); /* Replace with thatever your font file is */ } .fa-wallet:before { font-family: "Material-Design-Icons"; content: "\e602"; font-size: 20px; font-style: normal; } .addreewbutton { margin-left:-37px; background: red; } .btn-default.btn-on.active { background-color: #5BB75B; color: white; } .btn-default.btn-off.active { background-color: #DA4F49; color: white; } .clsOverlay table th { text-align: center !important; border: 2px solid; } #Detailstbody { text-align: center; } #Detailstbody tr td { border: 2px solid; } .bhoechie-tab-menu .list-group-item { padding: 14px 15px !important; } sup { background: red; color: #FFF; padding: 2px 4px 2px 2px; border-radius: 5px; font-weight: 600; } .disabledPay { pointer-events: none; opacity: 0.2; } /*Expiring Details Popup Start*/ .ExpiriConnecDt { margin-top: 64px; } .ExpiriConnecMain { float: left; margin-top: 7px; width: 100%; } #ExpiringDetails { width: 830px; top: 15%; display: none; position: fixed; left: 0; right: 0; background-color: #fff; padding: 0; max-height: 70%; z-index: 999999; margin: auto; overflow-y: auto; color:#000; border-radius: 10px; will-change: top, opacity; box-shadow: 0 16px 28px 0 rgb(0 0 0 / 22%), 0 25px 55px 0 rgb(0 0 0 / 21%); } #ExpiringDetails .modal-content { border-radius: 10px 10px 0px 0px !important; margin-top: 0px;} .ExpirHeading { float: left; width: 100%; background: #bfdeff !important; color: #000; font-size: 18px; padding-right: 5px; } .Expleft { float: left !important; } .Expright { float: right !important; } #ExpiringDetails nav { height: 64px; line-height: 64px; color: #fff; width: 100%; box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%); border-radius: 10px 10px 0px 0px !important;} #ExpiringDetails nav ul a { color: #fff; display: block; padding: 0px 10px 0px 10px; } #ExpiringDetails ul { list-style-type: none; margin: 0; padding: 0px; } .Expnav-wrapper { position: relative; height: 100%; } .ExpirHeading p { padding:10px 10px 10px 20px; margin:0px; } .ValidityTime { float: left; padding-left: 10px; width: 97%; } .ExpiringProHeader { padding: 0px; position: fixed; width: 830px; } .ModalFooter { position: sticky; position: -webkit-sticky; width: 100%; height: 10px; background: #fff; bottom: 0; /* margin-top: 379px; */ border-radius: 0px 5px 5px 5px; } .ExepirProHeadtxt { font-size: 22px; padding-left: 10px; } .ExepirProHeadtxt i { font-size: 27px; } .ExepirProductdetailsMain2 { float: left; width: 100%; } .ExepirProductDetailMain { width: 100%; float: left; border-bottom: 1px solid #d0cfcf; padding: 8px 0px 4px 0px; } .ExepirProductdetails { width: 100%; float: left; } .ExepirProductdetails p { font-weight: 300; font-size: 18px; padding: 8px 10px 2px 10px; float: left; } .ExepirProductdetails h6 { float: right; font-size: 14px; padding: 0px 10px; margin: 0px; } .ExepirProductdetails h5 { float: left; font-size: 14px; padding: 0px 0px 0px 20px; margin: 0px; } .ExepirProSubHeading { font-size: 16px !important; font-weight: 500 !important; } .ExepirProlist-unstyled { list-style: none; float: left; width: 100%; padding: 16px 10px 10px 20px !important; border-top: 1px solid #abaaaa; } .ExepirProPackageRateMain { float: left; width: 100%; padding: 4px 0px; } .ExepirProPeregraphText { font-size: 14px !important; } .ExepirProtags { float: left; font-size: 14px !important; margin: 0px; } .ExepirProtags2 { float: right; font-size: 14px !important; margin: 3px 0px; } .ExepirProSmallDiv { display: none; } /*Expiring Details Popup End*/ @media only screen and (min-width: 1025px) and (max-width: 1500px) { .QuickPayMain { width: 42%; } /*.PaymentSubsDetails { width: 60%; }*/ .ErrorMsgBox { width: 32%; } .ErrorMsgicon { width: 32%; } /*.LeftDtails { width: 34%; }*/ /*.RightDetails { float: left; width: 66%; }*/ /*.PaymentSubsDetails { width: 64%; }*/ } @media only screen and (min-width: 1025px) and (max-width: 1200px) { .ErrorMsgBox { width: 38%; } .ErrorMsgicon { width: 38%; } /*.LeftDtails { width: 34%; } .RightDetails { float: left; width: 66%; }*/ /*.PaymentSubsDetails { width: 68%; }*/ } @media only screen and (min-width: 751px) and (max-width: 1024px) { .QuickPayMain { width: 54%; } .ErrorMsgBox { width: 45%; } .ErrorMsgicon { width: 45%; } #modal1 { width: 97% !important; } /*.LeftDtails { width: 34%; } .RightDetails { float: left; width: 66%; }*/ .about_video_main { top: 116px; } } @media only screen and (min-width: 751px) and (max-width: 830px) { .PaymentSubsDetails { width: 99%; } .RightDetails { display: none; } .LeftDtails { width: 97%; } .PaymentSubsDetails { width: 97%; } .ExtraLi { display: none; } .ContinueBtn { display: block; } .RightDetails { width: 100%; margin-left: 0px;} } @media only screen and (min-width: 690px) and (max-width: 750px) { .QuickPayMain { width: 76%; } .PaymentSubsDetails { width: 60%; } .ErrorMsgBox { width: 57%; } .ErrorMsgicon { width: 57%; } .LeftDtails { width: 34%; } .RightDetails { float: left; width: 66%; margin-left: 0px; } .PaymentSubsDetails { width: 99%; } .about_video_main { top: 116px; } } @media only screen and (min-width: 450px) and (max-width: 768px) { .QuickPayMain { width: 76%; } .ErrorMsgBox { width: 80%; } .ErrorMsgicon { width: 80%; } .RightDetails { display: none; } .LeftDtails { width: 97%; } .PaymentSubsDetails { width: 97%; } .ExtraLi { display: none; } .ContinueBtn { display: block; } .RightDetails { width: 100%; } .about_video_main { top: 116px; } } @media only screen and (min-width: 200px) and (max-width: 768px) { .DetailsMain { height: 492px; } .SmalClosebtn { display: block; } .FullCloseBtn { display: none; } #coformation { position: relative; width: 100%;} .NoPendingBills img { width: 80%; } .NoPendingrenewals img { width: 80%; } } @media only screen and (min-width: 200px) and (max-width: 990px) { .QuickPayBack { left: 0px; } #ExpiringDetails { width: 97%; } .ModalFooter { width: 97%; } .ExpiringProHeader { width: 97%;} } @media only screen and (min-width: 200px) and (max-width: 720px){ .ExepirProHeadtxt { font-size: 18px; padding: 0px 9px 0px 0px !important; } .ExepirProHeadtxt i { font-size: 22px; } .ExpirHeading { font-size: 16px; margin-top: 8px; padding-top: 5px; padding-bottom: 5px; } #RenewalSubcription { width: 95%; } .ExepirProductdetails h5 { padding: 0px 0px 0px 11px; } .ValidityTime { padding-left: 1px; } .ExepirProSmallDiv { display: block; } .ExepirProLargeDiv { display: none; } .ConnectionName { width: 76%; } .ExpirHeading p { padding: 0px 12px 0px 9px !important; line-height: 25px !important;} .ExpiriConnecDt { margin-top: 56px; } .smallexpirynew{display:none;} } @media only screen and (min-width: 200px) and (max-width: 550px) { .about_video_main { width:95%; } } @media only screen and (min-width: 200px) and (max-width: 450px) { .QuickPayMain { width: 97%; } .ErrorMsgBox { width: 97%; } .ErrorMsgicon { width: 97%; } .RightDetails { display: none; } .LeftDtails { width: 97%; } .PaymentSubsDetails { width: 97%; } .ExtraLi { display: none; } .ContinueBtn { display: block; } .RightDetails { width: 100%; margin-left: 0px} .DueDateTop p { font-size: 13px; } } @media only screen and (min-width: 200px) and (max-width: 434px) { .about_video_main { top: 172px !important; } } @media screen and (min-width: 200px) and (max-width: 400px) { .ExepirProHeadtxt i { font-size: 16px !important; } .ExpirHeading p { padding: 0px 12px 0px 9px !important; } .ExepirProHeadtxtSmall { line-height: 26px !important; } } @media only screen and (min-width: 200px) and (max-width: 380px) { .PaymentMode { width: 105px !important; } .stepper { width: 100% !important; } #coformation { bottom: -11px; } .BuquName { white-space: nowrap; width: 72%; overflow: hidden; text-overflow: ellipsis; } .single-slide-item h2 { margin-top: 100% !important; } } @media screen and (min-width: 200px) and (max-width: 350px) { .ExepirProHeadtxt { font-size: 17px !important; } } @media screen and (min-width: 200px) and (max-width: 330px) { .ExepirProHeadtxtSmall { position: absolute !important; line-height: 26px !important; top: 0 !important; right: 0 !important; padding-right: 5px !important; } }