/*PAGE*/ .contentPage { position: relative; width: 100%; vertical-align: top; margin: 0 auto 0 auto; padding-top: 7em; height: 100vh; } /* CONTENT TABLES */ .contentTableLeft { width: 25%; padding-left: 5em; padding-top: 3em; vertical-align: top; } .contentTableRight { width: 75%; padding-top: 3.5em; padding-left: 4.0em; padding-right: 4.0em; vertical-align: top; } /* END CONTENT TABLES */ /* NAV SIDEBAR */ /* NAV BREADCRUMB */ .breadcrumb { margin-bottom: 2em; margin-right: 1em; } .breadcrumb > a:hover { color: #737373; text-decoration: underline; } .breadcrumb > a:last-child { font-weight: bold; pointer-events: none; } /* END NAV BREADCRUMB */ /* NAV ACCORDION */ .accordion { opacity: 0; position: relative; min-height: 100%; } .accordion:after { content: ''; position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: #DCDCDC; } .accordion > .content { margin-top: 2em; padding-left: 0.2em; } .accordion > ul > li.category { position: relative; margin-bottom: 1.2em; list-style: none; font-size: 0.9em; } .accordion > ul > li.category > a.categoryHead { margin-bottom: 1.2em; display: -webkit-box; display: -ms-flexbox; display: flex; } .accordion ul li { list-style: none; } /*increase space after last item in sub lists*/ .accordion > ul > li > ul > li:last-child { margin-bottom: 1.5em; } .accordion a { display:block; text-decoration: none; vertical-align: middle; position: relative; } .accordion a:hover { color: #404040; } .accordion > ul > li > ul > li > a { font-size: 0.96em; } .accordion > ul > li > ul.categoryItems { display: none; } .accordion > ul > li > ul.categoryItems > li { position: relative; display: inline-block; width: 100%; height: auto; padding: 0; } .accordion > ul > li > ul.categoryItems > li > a { width: 90%; padding: 0.8em; border-bottom: 1px solid gainsboro; font-size: 1.1em !important; } /*.accordion > ul > li > ul.categoryItems > li:after { content: ''; display: inline-block; margin-top: 0.6em; width: 80%; height: 1px; background: red; }*/ /* ACCORDION TRIANGLES */ .triangle { vertical-align: middle; display: inline-block; width: 0; height: 100%; border-top: 0.5em solid transparent; border-bottom: 0.5em solid transparent; border-left: 0.5em solid #ee3224; margin-top: 0.1em; margin-right: 1em; /*transition: .5s all;*/ } .triangleLeft { width: 0; height: 0; position: absolute; right: 0; top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); border-top: 0.85em solid transparent; border-bottom: 0.85em solid transparent; border-right: 0.85em solid #ee3224; z-index: 2; } .triangleOverlay { position: absolute; right: 0; top:-0.2em; bottom: -0.2em; width: 5px; background: #fff; z-index: 1; } .rotateRight { -webkit-transform:rotate(90deg); transform:rotate(90deg); } .contentPage > .contentTable .contentTableRight h1 { font-weight: normal; margin-bottom: 1em; } .contentPage > .contentTable .contentTableRight p.contactUs { margin-top: 3em; text-align: right; } /* MAIN PAGE BANNER */ .contentPage img.pageBanner { width: 100%; height: auto; } .contentPage .contentPageBannerContainer { position: relative; } .contentPage .contentPageBannerContainer img { width: 100%; } .contentPage .contentPageBanner { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } /*.contentPage .mobileSolutions { background-image: url('../images/banner_page_mobile_solutions.jpg'); }*/ .contentPage .contentPageBanner .bannerBox { position: relative; width: 50%; } .contentPage .contentPageBanner .bannerBox .bannerBoxHeadline { text-align: left; position: absolute; top: 50%; left: 0; transform:translate(0, -50%); } .contentPage .contentPageBanner .bannerBox .bannerBoxHeadline .headlineTop { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contentPage .contentPageBanner .bannerBox .bannerBoxTitle { font-size: 4em; width: 95%; } .contentPage .contentPageBanner .bannerBox .bread { margin-top: 1em; width: 60%; } .contentPage div.cleaningBox { text-align: center; } .contentPage .cleaningBox img.chartCircle { width: 90%; max-width: 15em; margin: 1em 0; } .bannerBoxLeft .bannerBoxHeadline { padding-left: 25%; } .bannerBoxLeft .bread { width: 80%; } /* MOBILE */ .pageBannerMobileContainer { width: 100%; padding: 0; } .pageBannerMobile { width: 100% !important; display: none; } .accordion div.mobileContent { display: none; margin-bottom: 1em; } .accordion div.mobileContent > h1 { display: none; } .accordion div.mobileContent ul li { list-style: disc; margin-bottom: 0.5em; } .accordion div.mobileContent ul li ul li { margin: 0.5em 0 0.75em 0; } .accordion div.mobileContent a.linkInContent { text-decoration: underline; } .accordion div.mobileContent .seekJobWrapper { position: relative; text-align: left; margin-top: 2em; } .accordion div.mobileContent a.seekJob { display: inline-block; color: #fff; background: #000; border-radius: 10px; border: none; padding: 1.2em 3em; text-decoration: none; } /* END ACCORDION MOBILE */ /* CONTACT TABLE (KONTAKTA OSS PAGE) */ .contentPage > .contentTable .contactTable { margin-bottom: 2em; } .contentPage > .contentTable .contactTable td img { height: 1.2em; margin-right: 0.5em; } .contentPage > .contentTable .contactTable td a { text-decoration: none; } .contentPage > .contentTable .contactTable h3 { margin-bottom: 0.2em; } /* end contact table */ .contentPage > .contentTable .locationContainer { margin-top: 2em; position: relative; width: 100%; height: 20em; } .contentPage > .contentTable .locationContainer > img.locationMarker { position: absolute; top: 50%; left: 50%; -webkit-transform:translate(-50%,-50%); transform:translate(-50%,-50%); height: 4em; } /*.contentPage > .contentTable .locationMobile img.locationMarker { height: 1em !important; }*/ .mapInterceptOverlay { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent; } .contentPage > .contentTable .locationContainer .findUs { position: absolute; bottom: 1.2em; right: 1.2em; height: 6em; text-align: center; } .contentPage > .contentTable .locationContainer .findUs a { text-align: center; } .contentPage > .contentTable .locationContainer .findUs a img { margin: 0 auto; height: 6em; } .contentPage > .contentTable .locationContainer .findUs a div { position: absolute; bottom: 0.1em; width: 100%; color: white; font-size: 0.75em; text-decoration: underline; } .contentPage > .contentTable .contentTableRight > .seekJobWrapper { position: relative; text-align: right; margin-top: 4em; } .contentPage > .contentTable .contentTableRight a.seekJob { color: #fff; background: #000; border-radius: 10px; border: none; padding: 1.2em 3em; text-decoration: none; } /* BOTTOM TWO COLUMN (FOR CUSTOMERS / CONTACT) */ .contentPage > .contentTable .contentTableRight .bottomTwoColumn { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 2em; } .contentPage > .contentTable .bottomTwoColumn div.column { width: 50%; } .contentPage > .contentTable .bottomTwoColumn div.column p:first-child { margin-top: 0 !important; } .contentPage > .contentTable .productCustomers .customerIcons { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contentPage > .contentTable .productCustomers .customerIcons img { height: 3em; margin-right: 1em; } .contentPage > .contentTable .productCustomers .customerIcons img.shorter { height: 2em; } /* END BOTTOM TWO COLUMN */ /* MEDIA QUERIES */ @media only screen and (max-width: 1600px) { .contentTableRight { padding-top: 3.5em; padding-left: 4.0em; padding-right: 8.0em; } } @media only screen and (max-width: 1500px) { .contentTableRight { padding-top: 3.5em; padding-left: 4.0em; padding-right: 6.0em; } .contentPage .contentPageBanner .bannerBox .bannerBoxTitle { font-size: 3em; } } /* SMALL LAPTOPS */ @media only screen and (max-width: 1200px) { .contentPage .contentPageBanner .bannerBox .bannerBoxTitle { font-size: 2.5em; } .contentPage .contentPageBanner .bannerBox .bread { width: 75%; } .contentTableLeft { padding-left: 3em; padding-top: 3em; } .contentTableRight { padding-top: 3em; padding-left: 4.0em; padding-right: 4.0em; } .contentPage > .contentTable .bottomTwoColumn div.column { width: 100%; } .contentPage > .contentTable .bottomTwoColumn div.column:first-child { margin-bottom: 1em; } } /* SMALL LAPTOPS */ @media only screen and (max-width: 992px) { .contentTableLeft { padding-left: 2em; } .contentTableRight { padding-top: 4.5em; padding-left: 3em; padding-right: 2em; } } /* LARGE TABLETS */ @media only screen and (max-width: 768px) { .contentPage { padding-top: 5.5em; } .contentPage .contentPageBanner .bannerBox .bannerBoxHeadline { display: none; } .contentPage .contentPageBanner .bannerBox .bread { width: 90%; } .pageBannerMobile { display: inline-block; width: 100%; border: none; } img.pageBanner { display: none; } .contentTableLeft { width: 100%; padding: 0; margin: 0; } .contentTableRight { display: none; } .contentTableLeft > div > #navBreadcrumb { display: none; } .accordion { padding: 2em; } .accordion:after { display: none; } .accordion > ul > li > ul.categoryItems > li > a { width: 100%; padding: 1em 0; } .accordion .triangleLeft, .triangleOverlay { display: none; } .linkContactUs { display: inline-block !important; text-decoration: underline !important; padding-bottom: 0; } .contentPage > .contentTable .bottomTwoColumn div.column p.contactUs { display: none; } } @media only screen and (max-width: 620px) { .contentPage .contentPageBanner .bannerBox .bannerBoxTitle { font-size: 1.5em; } .contentPage .contentPageBanner .bannerBox .bread { width: 95%; } } /* PHONES */ @media only screen and (max-width: 480px) { .contentPage { padding-top: 4em; padding-bottom: 0; line-height: 1.2em; } .contentTableLeft { width: 100%; } .contentPage .contentPageBanner .bannerBox .bannerBoxTitle { font-size: 1.5em; } .contentPage .contentPageBanner .bannerBox .bread { display: none; } .triangle { border-top: 0.4em solid transparent; border-bottom: 0.4em solid transparent; border-left: 0.4em solid #ee3224; margin-right: 0.6em; } .categoryItems { padding: 0; } .accordion { padding-bottom: 0; } .accordion div.mobileContent .seekJobWrapper { margin-top: 2em; text-align: center; } .accordion div.mobileContent a.seekJob { display: block; padding: 1.2em; } } @media only screen and (max-width: 380px) { .contentPage > .contentTable .productCustomers .customerIcons img { height: 2.5em; } .contentPage > .contentTable .productCustomers .customerIcons img.shorter { height: 1.5em; } } /* END NEW BY MARK */