:root {
    --white: #fff;
    --black: #000;
    --blue: #2c7abc;
    --blue-darker: #266399;
    --blue-faded: #557ea1;
    --gray: #88898d;
    --yellow: #ffae00;
}
html { scroll-behavior: smooth; }
.text-roboto { font-family: "Roboto", sans-serif; font-weight: 300; font-style: normal; }
.text-roboto-condensed { font-family: "Roboto Condensed", sans-serif; font-optical-sizing: auto; font-weight: 300; font-style: normal; }



.text-white { color: var(--white);}
.text-black { color: var(--black);}
.text-blue { color: var(--blue);}
.text-blue-darker { color: var(--blue-darker);}
.text-gray { color: var(--gray);}
.text-yellow { color: var(--yellow); }
.text-blue-faded { color: var(--blue-faded); }

.bg-white { background-color: var(--white);}
.bg-black { background-color: var(--black);}
.bg-blue { background-color: var(--blue);}
.bg-blue-faded { background-color: var(--blue-faded);}
.bg-blue-darker { background-color: var(--blue-darker);}
.bg-gray { background-color: var(--gray);}
.bg-yellow { background-color: var(--yellow);}

body { background-color:var(--white); font-size:17px; padding-top:90px; font-family: "Roboto", sans-serif; font-weight: 300; font-style: normal; padding-top:114px;  overflow-x:hidden; }
nav { max-width:800px; margin:auto; } 
nav ul { margin: 0; padding: 0; list-style: none; position: relative;  } 
nav ul li { display: inline-block;  } 
nav ul li a { display: block; padding: 50px 10px 39px; color: var(--green); font-size: 19px; text-decoration: none; font-family: "Roboto Condensed", sans-serif;  font-weight:700; font-style: normal; border-bottom:7px solid transparent;} 
nav ul ul { opacity:0; position: absolute; top: 124px; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;     background:var(--blue); padding: 1rem; z-index: 100; } 
nav ul li:hover > ul { display:inherit;  top: 124px; opacity:1; } 
nav ul ul li { width: 200px; float: none; display: list-item; position: relative; margin-bottom:5px; } 
nav ul li:hover a,
.home-section .link-home, 
.about-section .link-about,
.porta-potty-solutions-section .link-porta-potty-solutions,
.portable-trailers-section .link-portable-trailers { border-bottom:7px solid var(--blue); }
nav ul ul li a { font-size:16px; padding:0; border-bottom:0 !important; color:var(--white); } 
nav ul ul li:hover a { font-size:16px; padding:0;  border-bottom:0 !important;  }

.fade-in { opacity:0; }
.mobile-overlay-wrapper { opacity:0; position:fixed; top:0; left:0; right:0; bottom:0; background-color:var(--blue); z-index:-1; display:flex; align-items:center; justify-content: center; text-align: center; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease; }
.mobile-overlay-wrapper > li { margin-bottom:1rem; }
.mobile-overlay-wrapper a  { color:var(--white); text-decoration: none; font-size:27px; }
.mobile-overlay-wrapper a.order-online-link { font-size:20px; display:inline-block; margin-top:.5rem;  }
.mobile-dropdown { display:none; }
.mobile-dropdown a { font-size:20px; color: var(--blue-faded); }
.mobile-trigger { cursor:pointer; width:40px; height:20px; position:fixed; top:50px; right:30px; z-index:1006;  display:none; }
.mobile-trigger span { width:100%; display: block; background-color: var(--blue); height:2px; margin-bottom:5px; border-radius: .25rem; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;transition: all 0.5s ease;}
body.open .mobile-trigger span:nth-child(3) { display:none; }
body.open .mobile-trigger span:nth-child(1) { transform:rotate(45deg); background-color: var(--white); }
body.open .mobile-trigger span:nth-child(2) { transform:rotate(-45deg); margin-top:-7px; background-color: var(--white); }
body.open .mobile-overlay-wrapper { opacity: 1; z-index:1005; }

header { display:flex; align-items:center; height:115px; background: var(--white); position:fixed; top:0; left:0; width:100%; z-index:1001;  }

h2 { font-weight: 400; font-style: normal; }
.opacity-0 { opacity: 0;}
.btn-blue { font-size:19px; font-family: "Roboto Condensed", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; display: inline-block; padding:10px 20px; background-color: var(--blue); color: var(--white); text-decoration: none; }

.btn-trans { font-size:19px; font-family: "Roboto Condensed", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; display: inline-block; padding:10px 20px; background-color: transparent; color: var(--white); text-decoration: none; border: 1px solid var(--white); }

.btn-white { font-size:19px; font-family: "Roboto Condensed", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; display: inline-block; padding:10px 20px; background-color: var(--white); color: var(--blue); text-decoration: none; }

.btn-yellow { font-size:22px; font-family: "Roboto Condensed", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; display: inline-block; padding:5px 40px; background-color: var(--yellow); color: var(--blue-darker); text-decoration: none; }

.text-fs-13 { font-size:13px; }
.text-fs-14 { font-size:14px; }
.text-fs-16 { font-size:16px; }
.text-fs-17 { font-size:17px; }
.text-fs-18 { font-size:18px; }
.text-fs-20 { font-size:20px; }
.text-fs-22 { font-size:22px; }
.text-fs-25 { font-size:25px; }
.text-fs-30 { font-size:30px; }
.text-fs-77 { font-size:77px; }

.slide { position:relative; width:100%; }
.slide-text { position:absolute; top:50%; transform:translateY(-50%); left:32px; width: 40%; z-index:1001; background-color: var(--blue); padding:2.5rem ; clip-path: polygon(5% 0%, 95% 0%, 100% 10%, 100% 90%, 95% 100%, 10% 110%, 0% 90%, 0% 10%); }

.slide-2 .slide-text { left:auto; right:32px; }

.mw-60 { max-width: 60%;}
.mw-70 { max-width: 70%;}
.mw-700 { max-width:700px; }
.mw-800 { max-width:800px; }
.mw-900 { max-width:900px; }
.mw-1000 { max-width:1000px; }

.text-bold-700 { font-weight: 700;}

.object-fit-cover { width:100%; height:100%; object-fit: cover;}

footer { color: var(--white); }
footer a { text-decoration: none; color: rgba(255, 255, 255, .8); }
footer .form-wrapper { border-bottom:2px solid var(--white); }
footer .form-wrapper button { letter-spacing: .09rem; display: flex; align-items:center; padding-right:1rem; }


.triangle-white {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid #fff; /* Color of the triangle */
    position:absolute;
    z-index: 900;
}

.triangle-blue {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid var(--blue); /* Color of the triangle */
    position:absolute;
    z-index: 800;
}

.triangle-blue-small {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid var(--blue); /* Color of the triangle */
    position:absolute;
    z-index: 800;
}


.triangle-blue-with-border {
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 35px solid var(--blue); /* Color of the triangle */
    position:absolute;
    z-index: 800;
}


.triangle-blue-darker {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid var(--blue-darker); /* Color of the triangle */
    position:absolute;
    z-index: 800;
}

.top-left { transform:rotate(-45deg); top: -10px; left: -20px; }
.top-right{ transform:rotate(45deg); top: -10px; right: -20px; }
.bottom-left { transform:rotate(225deg); bottom: -5px; left: -20px; }
.bottom-right{ transform:rotate(134deg); bottom: -5px; right: -20px; }

.triangle-blue-with-border.top-left { left: -30px; filter: drop-shadow(3px 4px 0px #ffffff); }
.triangle-blue-with-border.top-right { right: -30px; filter: drop-shadow(3px 4px 0px #ffffff); }

.add-top-shadow::before { content:''; position: absolute; top:0; left:0; width:100%; height:100px; z-index:999; background: rgb(0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0) 68%, rgba(0,0,0,0.3533788515406162) 100%);  }

.mw-1048 { max-width: 1048px;}

.text-fw-400 { font-weight: 400;}
.border-left-blue {     border-left: 5px solid var(--blue); }
.border-left-yellow {     border-left: 5px solid var(--yellow); }

.hero-text { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); z-index:100;}

.add-scroll-margin-top { scroll-margin-top: 200px; }

.porta-potty-solutions-section .active-tab { background-color:var(--white); color: var(--blue); }
.porta-potty-solutions-section .triangle-blue-small { display:none; }
.porta-potty-solutions-section .active-tab .triangle-blue-small { display:block; }
.porta-potty-solutions-section .porta-sub-nav { max-width:1100px; }
.porta-potty-solutions-section .porta-sub-nav a { white-space:nowrap; color:var(--white) }
.porta-potty-solutions-section .porta-sub-nav a.active-tab { color:var(--blue) }
.porta-potty-solutions-section .porta-sub-nav-mobile  { display:none; }
.porta-potty-solutions-section .thumb-img { cursor: pointer;}
.porta-potty-solutions-section .selected { border-color:#c40334 !important; }


@media (max-width:1279px){
    .porta-potty-solutions-section .porta-sub-nav-mobile { display:block; }
    .porta-potty-solutions-section .porta-sub-nav { display:none; }
    .porta-potty-solutions-section .hide-on-medium-vp { display:none; }
}

@media (max-width:990px){
    .mobile-trigger { display:block; }
    #slide-1 .slide-text { position:absolute; bottom:30px; left:30px; width: 80%; }
    #slide-1 .slide-text .text-fs-77 { font-size:37px; }
    #slide-1 .slide-text .text-fs-20 { font-size:15px; }
    .btn-purple { font-size:13px;  }
    #slide-1::after { content:''; position:absolute; bottom:0; left:0; top:0; right:0; width:100%; background: rgb(0,0,0, .5); height:100%; }
    .sm-mw-90 { max-width: 90%;}


    .triangle-white {
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
        border-bottom: 20px solid #fff; /* Color of the triangle */
    }

    .inner-page-type .hero { min-height: 150px; }
    .inner-page-type .hero img { object-fit: cover; width: auto !important; height:200px }
    .remove-borders-on-990 .border-end, .remove-borders-on-990 .border-bottom, .remove-borders-on-990 .border-top { border:none !important }
    .index-page-type .slide-text { width:90%; left:50%; right:auto; top:50%; transform:translate(-50%, -50%); background-color: transparent; text-align: center; }
    .index-page-type .slide::before { content:''; position:absolute; top:0; left:0; right:0; bottom:0; background-color: rgb(0,0,0, .3); z-index:5; width:100%; height:100%;}
    .index-page-type .btn-white { font-size:12px; }
    .index-page-type .text-fs-22 { font-size:16px; line-height: normal;}
}