@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');





body { color: #58595B; background-color: #fff; font-family: 'Open Sans', sans-serif; font-size: 14px; margin: 0; }

a, a:link, a:visited, a:hover, a:active { text-decoration: none; cursor: pointer; }

h1 { font-family: 'Open Sans', sans-serif; color: #278CC1; font-size: 30px; }

h2 { margin-top: 10px; margin-bottom: 10px; font-size: 18px; font-weight: bold; color: #278dc1; }

.bg-blu h1, .bg-blu h2, .bg-blu h3, .bg-blu h4, .bg-blu h5 {color:#FFF;}



.left { float: left; }

.right { float: right; }

.center { margin: 0 auto; }

.clear { clear: both; width: 100%; }

.clearme { clear: both; width: 100%; }

.sp5 { width: 100%; height: 5px; clear: both; }

.sp10 { width: 100%; height: 10px; }

.sp12 { width: 100%; height: 12px; }

.sp15 { width: 100%; height: 15px; clear: both; }

.sp20 { width: 100%; height: 20px; clear: both; }

.sp25 { width: 100%; height: 25px; clear: both; }

.sp30 { width: 100%; height: 30px; clear: both; }

.sp35 { width: 100%; height: 35px; clear: both; }

.sp36 { width: 100%; height: 35px; clear: both; }

.sp40 { width: 100%; height: 40px; clear: both; }

.sp45 { width: 100%; height: 45px; clear: both; }

.sp50 { width: 100%; height: 50px; clear: both; }

.sp55 { width: 100%; height: 55px; clear: both; }

.sp60 { width: 100%; height: 60px; clear: both; }

.sp65 { width: 100%; height: 65px; clear: both; }

.sp70 { width: 100%; height: 70px; clear: both; }

.sp75 { width: 100%; height: 75px; clear: both; }

.sp80 { width: 100%; height: 80px; clear: both; }

.sp85 { width: 100%; height: 85px; clear: both; }

.sp90 { width: 100%; height: 90px; clear: both; }

.sp95 { width: 100%; height: 95px; clear: both; }

.sp100 { width: 100%; height: 100px; clear: both; }

.sp110 { width: 100%; height: 110px; clear: both; }

.sp112 { width: 100%; height: 112px; clear: both; }

.sp136 { width: 100%; height: 136px; clear: both; }

.sp140 { width: 100%; height: 140px; clear: both; }

.spHeader {width: 100%; height: 100px; clear: both;}

.txt-blu {color:#278dc1;}

.bg-blu { background-color: #278dc1; color:#FFF;  }

.bg-blu90 { background: url(/images/bg-blu90.png) ; color:#FFF;  }

.bg-light-blu { background-color: #8CC3CD; }

.bg-light-gray {background-color: #F5F5F5}

.bg-light-gray-2 {background-color: #dee1ec}



.bg-dark-gray { background-color: #333333; }

.border-lt-gray { border: 1.5px solid #efefef; }

.border-dk-gray { ; border-radius:4px; text-transform: uppercase; color:#278CC1; background:#dee1ec; }

.border-lt-gray-thick { border: 2px solid #8dc4cd; border-radius:4px; }



.footer {border-top:1px solid #efefef; padding:30px 0 0 0; background:#278dc1; color:#FFF;}

.footer a {color:#FFF; text-decoration: underline;}

.subFooter { padding: 15px 0; color: #fff; overflow: auto; font-size: 11px; }

.subFooter a { color: #fff; text-decoration: underline; }

.blogDateWrapper { font-family: 'Open Sans', sans-serif; font-size: 32px; font-weight: 800; color: #278dc1; border: 2px solid #278dc1; border-radius: 3px; width: 80px; height: 52px; float: left; text-align: center; text-transform: uppercase; margin: 0 30px 5px 0; padding: 8px 6px; line-height: 18px; }

.blogHeadline {width:; height: 60px; font-family: 'Roboto', sans-serif; font-weight: 500; font-size: 28px; line-height: 30px; text-align: left; color: #278dc1; margin: 0 0 10px; line-height: 24px; }

.blogHeadline h2 { font-size: 28px; font-weight: 400; margin-top: 0; line-height: 26px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.blogHeadline a {color:#278dc1;}

.blogHeadline a:hover {text-decoration:underline;}

.dateDay { margin: 0 0 4px 0; }

.dateMonth { /*width: 3.2ch; overflow: hidden;*/ white-space: nowrap; margin: 0 auto; text-align: center; font-size: 11px; letter-spacing: 0; }

.blogSummaryWrap { margin: 10px 0 10px 0; max-width: 750px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp: 4;-webkit-box-orient: vertical;}

.blogImageWrap { max-width: 750px; height: auto; margin: 10px 0 }

.blogImageWrap img { width: 100%; height: auto; box-shadow: 0px 0px 2px #333; }

.blogDetailImageWrap { width:100%; height: auto; margin: 10px 0 }

.blogDetailImageWrap img { width: 100%; height: auto; box-shadow: 0px 0px 2px #333; }

.btnBlogDetails {max-width: 200px; background:#278dc1; border-radius:6px; font-weight:600; font-size:14px; text-align:center;}

.btnBlogDetails a {display:block; padding:12px 20px; color:#FFF; text-decoration: none; text-transform:uppercase;}

.chart-attributes { position: absolute; bottom: 10px; width: 600px; height: 210px; }

.btn-usertips {max-width:170px; padding:10px 20px; margin:0 0 10px 0; position:relative; background:#278dc1; color:#FFF; text-transform:uppercase; font-weight:600; line-height:12px; cursor: pointer; border-radius:30px;}

.btn-usertips span {font-size:11px; }

.user-tips {width:; height: auto; position:absolute; background:#278dc1;  padding:60px; color:#FFF; z-index:500; top:250px; border-radius:66px; box-shadow:0px 10px 30px gray;}

.hide-tips {position:absolute; right:50px; top:30px; font-size:32px; cursor: pointer;}

.hpotdns {display: none;}



.dynamicFeature350 { width: 100%; min-height: 350px; position: relative; }

.dynamicFeature400 { width: 100%; min-height: 400px; position: relative; }

.dynamicFeature500 { width: 100%; min-height: 500px; position: relative;}

.dynamicFeature600 { width: 100%; min-height: 600px; position: relative;}

.dynamicFeature650 { width: 100%; min-height: 650px; position: relative;}

.dynamicFeature100vh { width: 100%; height: 100vh; background-size:cover; position: relative; }



/*===========================

12 COLUMN GRID

===========================*/



.section12 { clear: both; padding: 0px; margin: 0px; }

.col12 { display: block; float: left; margin: 1% 0 1% 1%; }

.col12:first-child { margin-left: 0; }

.group12:before,

.group12:after { content: ""; display: table; }

.group12:after { clear: both; }

.group12 { zoom: 1; /* For IE 6/7 */ }

.span12_of_12 { width: 100%; }

.span11_of_12 { width: 91.58%; }

.span10_of_12 { width: 83.16%; }

.span9_of_12 { width: 74.75%; }

.span8_of_12 { width: 66.33%; }

.span7_of_12 { width: 57.91%; }

.span6_of_12 { width: 49.5%; }

.span5_of_12 { width: 41.08%; }

.span4_of_12 { width: 32.66%; }

.span3_of_12 { width: 24.25%; }

.span2_of_12 { width: 15.83%; }

.span1_of_12 { width: 7.416%; }



.bio-details-wrap {}

.bio-details-wrap .bio-img {width:100%; min-height:350px;}

.bio-details-description {font-size:; font-weight: 300;}

.bio-details-wrap h1 {font-family:'Open Sans', sans-serif; font-weight:800; letter-spacing:-1px;}

.bio-details-wrap h2 {font-size:26px; font-weight:300; margin-top:-14px;}

.bio-img { width:100%; min-height:250px; background:#efefef;}

.bio-img img {width:100%; height:auto;}

.bio-name {width:100%; height:auto; font-size:22px; font-weight:800; text-align:center; color:#748592; margin-top:10px;}

.bio-title {width:100%; height:auto; font-size:18px; font-style: italic; font-weight:600; letter-spacing:-1px; text-align:center; color:#278dc1; }

.bio-company {width:100%; height: auto; font-size:11px; font-weight:800; letter-spacing:1px; text-align:center; text-transform: uppercase; color:#58595B;}

.bio-description {font-size:; font-weight: 300; margin-top: 0; line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

.bio-readmore {width:200px; text-align:right; font-size:14px; font-style:italic; float:right; margin-top:10px;}

.bio-readmore a {color:#278CC1; font-weight:600;}

.bio-tags {}

.bio-links {}





@media only screen and (max-width: 480px) {

    .col { margin: 1% 0 1% 0%; }

    .span_1_of_12, .span_2_of_12, .span_3_of_12, .span_4_of_12, .span_5_of_12, .span_6_of_12, .span_7_of_12, .span_8_of_12, .span_9_of_12, .span_10_of_12, .span_11_of_12, .span_12_of_12 { width: 100%; }

}



@media only screen and (max-width: 992px) 

{



}



@media only screen and (max-width: 768px) 

{

    .span3_of_12 {width:100%; padding:10px 0;}

}





.featureAppSuccess {width:100%; height: 300px; background:url(/images/Feature-Employmenty.png) no-repeat top center; background-size:cover; position:relative;}

.featureAppSuccess h1 {color:#000; margin-top:50px; text-shadow:0px 1px 1px #FFF; line-height:32px; width:80%;}

.featureLanding {width:100%; min-height: 400px; background:url(/images/uploads/img-featuretemp.jpg) no-repeat top center #1b8299; background-size:cover; position:relative;}



.form-list-control, .form-control {width: 100%; height:54px; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529;  background-clip: padding-box; border: 1px solid #ced4da; border-radius: 0.25rem; transition: .15s ease-in-out,box-shadow .15s ease-in-out; }

.form-outer-wrap {border: 1px solid #ced4da; padding:30px;}



.bttn-CTA {width:100%; height:60px; position:relative; padding:6px 20px; line-height:16px; margin-bottom:4px; color:#FFF; font-size:24px; font-weight:800; text-transform:uppercase; display:block;}

.bttn-CTA span {font-size:14px; font-weight:500; }

.bttn-icon {position:absolute; right:10px; top: 12px; font-size:32px; color:#FFF;}



.buttonenabled { width: 250px; height: 44px; background-color: #1b8299; color: #FFF; cursor: pointer; border-radius: 2px; padding: 10px 20px 20px 20px; font-size: 14px; }

.buttonenabled:hover { background: #69c8c6 }



/*=======================

    INLINE SCROLL

=======================*/

.AdminScroll

{

max-height: 350px !important;

overflow-y:scroll !important;

overflow-x: hidden;

scrollbar-base-color: #278dc1;

scrollbar-face-color: #278dc1;

scrollbar-3dlight-color: #278dc1;

scrollbar-highlight-color: #278dc1;

scrollbar-track-color: #FFF;

scrollbar-shadow-color: #dadada;

border:none;

font-size:13px;

}



.AdminScroll::-webkit-scrollbar { width: 16px; height: 3px;}

.AdminScroll::-webkit-scrollbar-track {  background-color: #FFF; box-shadow: inset 0 0 5px #dadada; border-radius:12px;}

.AdminScroll::-webkit-scrollbar-thumb { height: 50px; background-color: #278dc1; border-radius: 13px;}

.AdminScroll::-webkit-scrollbar-corner { background-color: #278dc1;}

.AdminScroll::-webkit-resizer { background-color: #278dc1;}



/*=======================

    ADMIN CLASSES

=======================*/

.adminGlobalWrap {}



.adminGlobalWrap h1 { font-family: 'Roboto', sans-serif; margin-top: 10px; margin-bottom: 10px; color: #278dc1; font-size: 32px; }

.adminGlobalWrap h2 { font-family: 'Roboto', sans-serif; margin-top: 10px; margin-bottom: 10px; font-size: 30px; font-weight: 400; color: #278dc1; }

.adminGlobalWrap h3 { font-family: 'Roboto', sans-serif; margin-top: 10px; margin-bottom: 10px; font-size: 24px; font-weight: 400; color: #278dc1; }

.adminGlobalWrap h4 { font-family: 'Roboto', sans-serif; margin-top: 10px; margin-bottom: 10px; font-size: 20px; font-weight: 400; color: #FFF; }

.adminGlobalWrap h5 { font-family: 'Roboto', sans-serif; margin-top: 10px; margin-bottom: 10px; font-size: 18px; font-weight: 400; color: #278dc1; }





.border-md-gray { border: 1px solid #efefef; }

.bg-lt-gray { background-color: #f7f8fc }

.bg-md-gray { background-color: #e4eaf0; }

.btnExport {}

.btn-med-submit { float: right; font-size: 13px; color: #FFF; background: #278CC1 !important; border-radius: 2px; padding: 10px 14px; font-weight: 800; min-width: 130px; height: 40px; border: 0px solid #dadada; background: none; text-transform: uppercase; text-align:center; }

.btn-med-submit:hover { background: #8dc4cd !important; }

.btn-med-submit a { }

.btn-med-delete { float: right; font-size: 13px; color: #FFF; background: #cc0000 !important; border-radius: 2px; padding: 10px 14px; font-weight: 800; min-width: 130px; height: 40px; border: 1px solid #dadada; background: none; text-transform: uppercase; }

.btn-med-delete:hover { background: #8dc4cd !important; }

.btn-med-delete a { }

.lnk-med-submit { float: right; text-align: center; font-size: 13px; color: #FFF; background: #278CC1 !important; border-radius: 2px; padding: 10px 14px; font-weight: 800; min-width: 130px; height: 40px; border: 0px solid #dadada; background: none; text-transform: uppercase; margin-right: 10px; }

.lnk-med-submit:hover { background: #8dc4cd !important; color: #fff; }

.lnk-med-submit a {display:block; color:#FFF; }

.lnk-med-submit a:hover { }



.btn-geocode { width:100%; height:52px; float: ; text-align: center; font-size: 13px; color: #FFF; background: #278CC1 !important; border-radius: 2px; padding: 10px 14px; font-weight: 800; border: 0px solid #dadada; background: none; text-transform: uppercase; margin-right: 10px; }

.btn-geocode:hover { background: #8dc4cd !important; color: #fff; }

.btn-geocode a {display:block; color:#FFF; }

.btn-geocode a:hover { }



.cb-map-bubble { width: 300px; height: 400px; }

.cb-map-bubble__title { font-size: 18px; font-weight: 700; }

.cb-map-bubble__imgwrap { }

.cb-map-bubble__img { width: 100%; height: auto; }

.cb-map-bubble__address { }

.cb-map-bubble__meta { }

.cb-map-bubble__desc { }

.cb-map-bubble__address div { }

.cb-map-bubble__meta div { }

.cb-map-bubble a { }



.gm-style-iw-d { }

.gm-style .gm-style-iw-c { }

/* Outer container */

.gm-style .gm-style-iw {height:600px !important; padding: 0 !important; }



/* Inner white bubble */

.gm-style .gm-style-iw-c { padding: 12px !important; border-radius: 12px !important; box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; }







.featureLogin { background: url('/images/img-login.jpg') bottom center no-repeat; background-size: cover; width: 100%; height: 100vh; position: absolute; z-index: 5; }

.featureLogin h2 { font-size: 28px; color: #FFF; margin: 0 0 10px 0; }

.loginFooter { height: 60px; width: 100%; padding: 20px 0; color: #FFF; background: #000; z-index: 999; position: fixed; bottom: 0; }

.loginWrapper { background: #000; opacity: .86; padding: 30px; color: #FFF; }

.loginWrapper label { margin-bottom: 0; }

.loginWrapper button { height: 54px; background: #015898; color: #FFF; text-transform: uppercase; }

.loginWrapper button:hover { background: #8dc4cd; color: #FFF; text-transform: uppercase; }

.LoginBg {width:100%; height:100%; position:absolute; background: url(/images/img-Login.jpg) top center no-repeat; background-size:cover;}

.form-control { height: 54px; }

.admin-message-wrapper { width: 100%; position: fixed; color: #FFF; margin-top: -36px; z-index: 50; }

.admin-action-tile { width: 100%; height: auto; position:relative; min-height: 200px; box-shadow: 0px 2px 2px #dadada; background: #278dc1; color: #FFF; padding: 20px; cursor:pointer; }

.admin-action-tile h4 { font-size: 22px; text-align: center; font-weight: 200; line-height: 18px; }

.admin-action-tile span { font-size: 13px; clear: both; font-weight: 800; float: left; }

.admin-action-tile-innerwrap { width: 100%; height: 100%; min-height: 160px; padding:20px; border: 1px solid #FFF; }

.admin-dashboard-feature { width: 100%; min-height: 360px; color:#FFF; background: url(/images/img-featureAdmin.jpg) no-repeat top left; border-bottom: 2px solid #303030; }

.admin-dashboard-feature-sm { width: 100%; min-height: 250px; color:#FFF; background: url(/images/img-featureAdmin.jpg) no-repeat top left; border-bottom: 2px solid #303030; }



.truncate-one-line { font-size:; font-weight: 300; margin-top: 0; line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

.icon-actions { font-size: 16px; color: #015898; margin: 0 6px; }

.icon-delete { font-size: 16px; color: #cc0000; margin: 0 6px; }

.admin-bttn-wrapper {width:100%; position:fixed; color:#FFF; z-index:50; background:#333333;}

.modelCount {width:100%; height:auto; position:relative; padding:10px; border:0px solid #FFF; background:#0d658f; font-size:18px; font-weight:700; color:#FFF; text-decoration:underline;}

.modelCount span {font-weight:400; margin-top:6px; text-decoration:none; margin-right:20px;}



@media (max-width: 768px) {

    .hide-768 { display: none !important }

}



.vc_grid-item-mini { background: #e7ebf0; }

.vc_gitem-post-data-source-post_excerpt { font-size:; font-weight: 300; margin-top: 0; line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

.vc_btn3.vc_btn3-color-juicy-pink,

.vc_btn3.vc_btn3-color-juicy-pink.vc_btn3-style-flat { background: #445461; float: right; height: 36px; float: right; padding: 8px 20px; }



.admin-uploaded-images { width: 174px; height: 200px; font-size: 12px; background: #f7f8fc; border: 1px solid #dadada; border-radius:6px; float: left; margin: 6px; overflow: hidden; padding: 12px; position: relative; }

.admin-uploaded-images img { width: 150px; height: 150px; }

.admin-image-download { position: absolute; bottom: 0px; right: 10px; }



.emailSent {width:100%; height:350px; background: url('/images/Email-MailSent.jpg') #ebe9e8 no-repeat center left;}



.pool-estimate-wrap {width:100%; height:600px; position:relative; background: url(/images/pool-design-hero.jpg) no-repeat top center;}

.pool-estimate-wrap .form-control {height:40px;}

.lbl-estimate {font-size:11px; font-weight:600; text-transform: uppercase; color:#FFF; margin-top:4px;}

.estimated {font-size:22px; font-weight:700; color:#278dc1;}

.pool-estimate-wrap .form-list-control, .form-control {font-size:13px;}

.field-wrap {line-height:12px;}



.field-wrap .form-list-control, .field-wrap .form-control {border-radius:2px;}





select {-webkit-appearance: menulist !important ; -moz-appearance: menulist !important; appearance: menulist !important; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus 

{ box-shadow: none; outline:none; border:1px solid #ced4da;}





.btn-estimate { float: right; text-align: center; font-size: 13px; color: #FFF; background: #278CC1 !important; border-radius: 2px; padding: 10px 14px; font-weight: 800; min-width: 130px; height: 40px; border: 1px solid #FFF; background: none; text-transform: uppercase; margin-right: 10px; }

.btn-estimate:hover { background: #8dc4cd !important; color: #fff; }

.btn-estimate a {display:block; color:#FFF; }

.btn-estimate a:hover { }



.cb_overlay {

    width: 100%;

    height: 600px;

    background: url(http://maddiesmillionpetchallenge.org/wp-content/uploads/transparent-dots-darkblue.png);

    position: absolute;

    top: 0;

    z-index: 5;

    padding: 0px 0 0 0;

}



.dashboardWrap {width:100%; height:100%;}

.dashboardWrap h2 {margin: 10px 0 10px 0}

.line-sep {width:94%; height:1px; background:#efefef; margin: 0 auto; margin-top:2px; margin-bottom:2px;}



/*applies to update create and edit*/

#toggle-icon, #icon-toggle { width: 100px; height: 40px; position: absolute; right: 20px; top: 0px; cursor: pointer; font-size: 32px; color: #278dc1; font-weight: 600; text-align: right; }

.text-muted { color: #278dc1 !important; font-weight: 700; }