@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Anton&display=swap"); html {
scroll-behavior: smooth;
}
body{margin: 0; padding: 0; font-family: 'Roboto', sans-serif !important; }
a{ -webkit-transition: all 0.5s ease-out; text-decoration: none !important; }
a:hover{ -webkit-transition: all 0.5s ease-out; text-decoration: none !important; }
.py-6{padding-top: 60px !important; padding-bottom: 60px !important;}
.text-theme{color: #cc3628 !important;}
.bg-theme{background: #cc3628 !important;}
.header {
width: 100%;
height: auto;
padding: 40px 0;
}
.headcontct{background: #ededed; padding: 25px 0;}
.headcontct a.rqstcll{font-size: 18px;}
.headcontct a.rqstcll:hover{background: #1a1a1a !important;}
.headcontct .opentime {
position: relative;
padding: 0px 0 0 48px;
color: #5f656d;
font-size: 16px;
font-weight: 400;
}
.headcontct .opentime i {
line-height: initial;
font-size: 36px;
position: absolute;
left: 0;
top: 0;
}
.headcontct .opentime h3 {
margin: 0;
padding: 0;
color: #222931;
font-size: 16px;
font-weight: 600;
}
.logo {
width: fit-content;
height: auto;  position: absolute;
left: 8%;
top: 8px;
z-index: 99; }
.logo img{height: 95px !important;}
.banner{width: 100%; height: auto;}
.banner img{width: 100%;}
.cmenu {
width: 100%;
height: auto;
background: none;
font-size: 13px;
text-align: right;
margin-top: 0px;
display: inline-block;
font-weight: normal; font-family: 'Roboto Condensed', sans-serif;
-webkit-transition: all 0.5s ease-out;
}
.cmenu ul{margin:0; padding: 0;}
.cmenu ul li{list-style: none; display: inline-block;  position: relative;}
.cmenu ul li a {
color: #1a1a1a;
position: relative;
padding: 6px 10px;
display: block;
margin: 0;
font-weight: bold;
border-radius: 5px;
}
.cmenu ul li a:hover, .cmenu ul li.active{background:#cc3628;}
.cmenu ul li a:hover, .cmenu ul li.active a{color: #fff; background:#cc3628;  text-decoration: none;}
.cmenu ul li.active li a{background:none;} .cmenu ul li ul{margin:50px 0 0; padding: 0; position: absolute; z-index: 999; background: #000;
border-bottom: solid 5px #cc3628; box-shadow: 0px 6px 11px -2px #000; opacity: 0; visibility: hidden;  -webkit-transition: all 0.5s ease-out;}
.cmenu ul li ul li{width: 230px; padding: 0 15px; text-align: left; text-transform: capitalize; list-style: none; border-bottom: solid 1px #333; position: relative;}
.cmenu ul li ul li:last-child{border-bottom:none;}
.cmenu ul li ul li a{color: #fff; display: block; padding:0px;}
.cmenu ul li ul li a i{color: #cc3628;}
.cmenu ul li ul li a:before{display: none;}
.cmenu ul li ul li a:hover{color: #fff; background: none;}
.cmenu ul li ul li:hover{background: #cc3628;}
.cmenu ul li:hover ul{margin:0px 0 0; opacity: 1; visibility: visible; line-height: 25px;  -webkit-transition: all 0.5s ease-out;}
.cmenu ul li:hover ul li ul{opacity:0; visibility: hidden;}
.cmenu ul li:hover ul li{line-height: 25px; padding: 8px 15px 8px;}
.banner{width: 100%; height: auto;  position: relative; z-index: 99;} 
.banner img{width: 100%;}
.banner .carousel-caption {
right: 0;
margin: 0 0 0 auto;
padding-bottom: 30px;
width: 42%;
top: 32px !important;
text-align: left;
font-size: 18px;
font-weight: 400;
z-index:1 !important;
}
.banner .carousel-caption h3 {
margin: 20px 0 14px;
font-size: 53px;
color: #1a1a1a;
font-weight: bold;
}
.banner .carousel-caption a.prtfobtn {
font-size: 17px;
padding: 10px 30px;
color: #fff;
background: #1a1a1a;
display: inline-block;
position: relative;
font-weight: 500;
border-radius: 12px;
position: relative;
z-index: 1;
margin: 30px 5px 0;
text-transform: uppercase; overflow: hidden;
}
.banner .carousel-caption a.prtfobtn:hover{color: #fff; background:none;}
.banner .carousel-caption a.prtfobtn:before{content: ""; position: absolute; width: 0%; height: 0; background: #cc3628; border-radius:0px; left: 0; right: 0; margin: auto; bottom: 0; top: 0; z-index: -1; -webkit-transition: all 0.4s ease-out;}
.banner .carousel-caption a.prtfobtn:hover:before {width: 100%; height: 100%; -webkit-transition: all 0.1s ease-out;}
.hmproblmsec{color: #555555;}
.hmproblmsec a.rqstcll{font-size: 20px; font-weight: 500;}
.hmproblmsec a.rqstcll:hover{background: #1a1a1a !important;}
.hmsrvcsec{background: #ededed;}
.hmsrvcsec .card{color: #555 !important; }
.hmsrvcsec .card .image{height: 235px; overflow: hidden;}
.hmsrvcsec .card .image img{width: 100%; height: 100%;  object-fit: cover;}
.hmsrvcsec .card a.btn.btn-dark:hover{background: #cc3628; border-color:#cc3628; }
.hmsrvcsec .card:hover{    box-shadow: 3px 3px 14px -7px #000000a3;}
.hmestimatesec{background: url(//justdrains.com/wp-content/themes/justdrain/images/estimate-bg.jpg); background-size: cover; background-attachment: fixed;}
.hmestimatesec a.rqstcll{font-size: 20px; font-weight: 500;}
.hmestimatesec a.rqstcll:hover{background: #3177de !important;}
.hmestmtebtmsec{color: #555 !important;}
.hmestmtebtmsec .card .icon{height: 95px; overflow: hidden; width: auto !important;}
.hmestmtebtmsec .card .icon img{height: 100%; overflow: hidden;}
.hmtestisec{}
.hmtestisec .card .image{height: 100%; overflow: hidden;}
.hmtestisec .card .image img{width: 100%; height: 100%; object-fit: cover;}
.hmtestisec .testimomin .content{border:solid 3px #ededed; border-radius: 10px; color: #555;}
.hmtestisec .testimomin .media img{width: 64px !important; height: 64px; }
.hmtestisec .testimomin .owl-nav {
text-align: right;
font-size: 52px;
position: absolute;
right: 0;
bottom: 0;
}
.hmtestisec .testimomin .owl-nav span {
height: auto; outline: none !important;
}
.hmtestisec .testimomin .owl-nav span:focus{    border: none !important;
box-shadow: none !important;
outline: none !important;}
.hmtestisec .testimomin .owl-dots button.owl-dot:focus {  outline: none;}
.hmtestisec .testimomin .owl-nav button:focus {outline: none;}
.hmourworksec{background: #ededed;}
.worknav ul{margin: 0; padding: 0;}
.worknav ul li{ list-style: none; display: inline-block; font-size:  18px; color: #1a1a1a; font-weight: 500;}
.worknav ul li a{    color: #111;
padding: 9px 18px;
display: block;
border-radius: 8px;}
.worknav ul li a:hover, .worknav ul li a.active{color: #fff; background: #cc3628 !important;}
.workthumb {
margin-bottom: 30px;
overflow: hidden;
border: solid 1px #f0f0f0; position: relative;
-webkit-transition: all 0.4s ease-out;
}
.workthumb .image {
width: 100%;
height: 365px;
overflow: hidden;
border-radius: 0;
}
.workthumb .image img{width: 100%; height: 100%; object-fit:cover; -webkit-transition: all 0.4s ease-out;position:relative}
.workthumb h4{
background: #0000009c;
padding: 20px;
font-size: 20px;
line-height: 28px;
width: 80%;
margin: 0 auto;
} .workthumb .iconmin .mininfo{    margin: 0 !important;
padding: 0;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
transition: tranlate -50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);}
.workthumb .iconmin ul{    margin: 0 !important;
padding: 0;
text-align: center;}
.workthumb .iconmin ul li{list-style: none; display: inline-block; font-size: 20px;     margin: 0 5px;display:none}
.workthumb .iconmin ul li a{    color: #fff;
text-decoration: none;
padding: 8px 10px;
background: #0000009e;
border: solid 1px #000;
display: block;
line-height: normal;
border-radius: 50%;}
.workthumb .iconmin ul li a:hover{color: #cc3628; text-decoration: none; border: solid 1px #cc3628; background-color: #000;}
.workthumb .iconmin ul li .yith-wcwl-add-to-wishlist {margin-top: 0px !important;}
.workthumb:hover {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.17);
-webkit-transition: all 0.4s ease-out;
}
.workthumb:hover .image img{    -webkit-transform: scale(1.1);
transform: scale(1.1);}
.workthumb:hover .iconmin {
visibility: visible;
opacity: 1;
}
.workthumb:hover .iconmin ul li:first-child {
-webkit-animation: bounceInDown .4s;
animation: bounceInDown .4s;
}
.workthumb:hover .iconmin ul li:nth-child(2) {
-webkit-animation: bounceInDown .6s;
animation: bounceInDown .6s;
}
.workthumb:hover  .iconmin ul li:nth-child(3) {
-webkit-animation: bounceInDown .8s;
animation: bounceInDown .8s;
}
.footer{background: #3c414c;}
.footer .opentime {
position: relative;
padding: 0px 0 0 48px;
font-size: 16px;
font-weight: 400;
}
.footer .opentime i {
line-height: initial;
font-size: 36px;
position: absolute;
left: 0;
top: 0;
}
.footer .opentime h3 {
margin: 0;
padding: 0;
font-size: 16px;
font-weight: 600;
}
.footer .socilicon {display: block; margin-bottom: 15px;}
.footer .socilicon a{list-style: none; display: inline-block; margin:0 12px;}
.footer .socilicon a i {line-height: 38px; text-align: center; font-size: 24px; border-radius: 50%; color: #fff;}
.footer .socilicon a:hover i{color: #cc3628;}
.footer ul{margin: 0; padding: 0;}
.footer ul li{    list-style: none;
font-size: 16px;
font-weight: 500;
margin-top: 12px;
padding: 0;
position: relative;}
.footer ul li a{ text-decoration: none; color: #fff;}
.footer ul li a:hover{color: #cc3628; text-decoration: none;}
.footer .nwsfrm{display:block; width: 100%; margin-top: 15px;}
.footer .form-group{flex:auto; display: inline-block; width:100%;}
.footer input[type=submit] {
flex: auto;
display: inline-block;
width: 37%;
color: #fff;
background: #cc3628;
border: none;
padding: 1px 3px !important;
font-size: 13px;
text-transform: uppercase;
height: 45px;
border-radius:0;
}
.footer .form-control {    height: 45px;
padding: 6px 12px;
color: #fff;
border: 1px solid #fff;
font-weight: normal;
background: none;
border-radius: 0;}
.footer .cuponbox{border:dashed 3px #fff; border-radius: 10px; }
.copyright{background: #3c414c; }
.copyright a{color: #24b5fa;}
.serviceimgsec .image{width:100%;height:380px;overflow:hidden}
.serviceimgsec .image img{width:100%;height:100%;object-fit:cover}
.innrbnr {
width: 100%;
height: auto;
position: relative;
background: #000 url(//justdrains.com/wp-content/themes/justdrain/images/banner1.jpg);
text-align: left;
background-size: cover!important; z-index: 99;
}
.innrbnr h2 {
margin: 0px;
padding: 110px 0;
color: #fff;
position: relative;
font-size: 50px;
}
.drainpage h2{text-transform: capitalize; font-weight: bold; color: #cc3628 !important;}
.drainpage a{color: #555;}
.drainpage a:hover{color: #cc3628;}
.drainpage ul{margin: 0 0 0 15px; padding: 0;}
.drainpage ul li{position: relative; list-style: none; padding: 3px 0 3px 25px;}
.drainpage li:before{left: 0; color: #cc3628; content: "\f00c"; position: absolute; font-family: FontAwesome;}
.drainpage ul.list-group{margin: 0px;}
.drainpage ul.list-group li{position: relative; list-style: none; padding-left:40px;}
.drainpage ul.list-group li:before{left: 11px; color: #cc3628; content: "\f00c"; position: absolute; font-family: FontAwesome;}
.drainpage ul.pagination{margin: 0px;}
.drainpage ul.pagination li{padding-left:0px;}
.drainpage ul.pagination li:before{display: none;}
.drainpage .video{height: 250px;}
.contfrm{}
.contfrm h2{font-family: 'Century Gothic';}
.contfrm h5{font-weight: 500;}
.contfrm i{color: #fff;}
.contfrm b{color: #fff;}
.mapmain{width: 100%; height: auto;}
.cmap{width: 100%; height:300px; }
.contfrm .form-control {
border-radius: 0;
height: 44px;
background-color: #fff;
border: 1px solid #ddd;}
.contfrm textarea.form-control{height: auto;}
.contfrm .form-control:focus{outline: none; box-shadow: none; border: solid 1px #000;}
.contfrm input[type=submit]{
padding: 8px 22px;
font-size: 19px;
font-weight: 500;
}
.contfrm input[type=submit]:hover{background: #204655; }
.rmenubar{display: none;}
.mysidenav{display: none;}
@media only screen and (max-width: 768px) {
.rmenubar{    position: absolute;
right: 10px;
top: 28px;
z-index: 99;
display: block;
font-size: 25px;
background: #cc3628;
padding: 0px 9px;
border-radius: 10px 0 10px 0;
-webkit-transition: all 0.5s ease-out;
}
.rmenubar a{color:#fff !important;}
.rmenubar a:hover, .rmenubar a:focus{color:#fff !important; }
.rmenubar:hover{background: #eb1c23;}
.mysidenav{
display: block;
position: fixed;
left: -280px;
top: 0;
width: 265px;
height: 100%;
z-index: 9999;
background: #fff;
padding-bottom: 55px;
box-shadow: 1px 2px 9px 2px #5a5a5a;
-webkit-transition: all 0.5s ease-out;
}
.mysidenav.navopen{
left: 0;
-webkit-transition: all 0.5s ease-out;
}
.mynavlayr{display:block; position:fixed; left:0; top:0; width:100%; height:100%; z-index:999; background:rgba(0, 0, 0, 0.36); display:none;}
.mysidenav .sitename {
width: 100%;
background: #204655;
text-align: center;
font-size: 22px;
color: #fff;
padding: 7px 0;
text-transform: uppercase;
font-weight: bold;
}
.mysidenav .sitename .sidbarlogo img {
height: 60px;width:auto;
}
.mysidenav a.mloginbtn {
background: #000;
padding: 11px 5px;
display: block;
text-align: center;
color: #fff;
}
.mysidenav ul.btnmenu{    width: 100%;
display: flex;
margin: 0px 0;
padding: 0;
position: absolute;
bottom: 0;}
.mysidenav ul.btnmenu li{    flex: 1;
display: inline-block;
text-align: center;
font-size: 20px;
background: #000;}
.mysidenav ul.btnmenu li:last-child{background: #f5d000;}
.mysidenav ul.btnmenu li a{display:block; color:#fff; padding: 8px 0 4px;}
.mysidenav ul.btnmenu li:last-child a{color: #000;}
.sidemenu {
height: 100%;
overflow-y: scroll;
padding: 0;
}
.sidemenu ul {margin: 0; padding: 0 15px;}
.sidemenu ul li{list-style:none; position:relative;}
.sidemenu ul li li{text-transform: capitalize;}
.sidemenu ul li a {color: #000; padding: 5px 10px; display: block; border-bottom: solid 1px #ccc;font-size:12px}
.sidemenu ul li a:hover{color: #991b1e; }
.menusociallink {width: 100%;
position: absolute;
bottom: 0px;
text-align: center;
padding: 10px 0;}
.menusociallink ul{margin:0; padding:0;}
.menusociallink ul li{list-style:none; display:inline-block;} 
.menusociallink ul li a{color:#000;} 
.menusociallink ul li a i {
width: 35px;
height: 35px;
background: #000;
text-align: center;
line-height: 35px;
color: #fff;
}
.cmenu{display: none;}
.header {padding: 4px 0 12px;}
.logo {padding:0px; position: relative; left: 0; }
.logo img {height: 82px !important;}
.headcontct {padding: 12px 0; text-align: center;}
.headcontct .opentime{display: none;}
.headcontct .rqstcll{width:100%;    font-size: 11px!important;}
.innrbnr h2 {padding: 50px 0; font-size: 36px;}
.banner .carousel-caption {
right: 0;
left: 0;
margin: 0 auto;
width: 45%;
top: 10px !important;
font-size: 18px;
text-align: center;
}
.banner .carousel-caption h3 {
margin: 0 0 14px;
font-size: 18px;
}
.drainpage ol {margin-left: 12px;}
.drainpage li:before {left: 18px;}
}