body { font-size:12px; } .truncate { /*width: 250px; white-space: nowrap;*/ overflow: hidden; text-overflow: ellipsis; } .HideElement { display:none; } ul {margin:0px;} @media (min-width:220px) and (max-width:480px) /* smartphones, iPhone, portrait 480x320 phones */ { /* FONT STYLES --------------------------------------------------------------*/ h1{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:18px; font-weight:800; margin:0} h2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:11px; font-weight:800; margin:0;} h3{font-family:'Roboto Slab',Georgia; font-size:64px; font-weight:400; margin:0;} h4{font-family:'Lato', Arial; font-size:12px; font-weight:700; margin:0;} h5{font-family:'Roboto Slab',Georgia; font-size:20px; font-weight:300; margin:0;} h6{font-family:'Roboto Slab',Georgia; font-size:48px; font-weight:300; margin:0;} .ArticleTitle {font-family:'Lato', Arial; font-size:2em; font-weight:700; margin:0;} .ArticleBody {font-family:'Lato', Arial; font-size:17px; font-weight:200; margin:0;} .ArticleBody1 {font-family:'Lato', Arial; font-size:13px; font-weight:300; margin:0;} .ArticleBody1 p {text-align:left;} .ArticleBody2 {font-family:'Lato', Arial; font-size:16px; font-weight:300; margin:0;} .ArticleBody1 a{color:#249555; text-decoration:none;} .ArticleBody1 a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} .Button1 {font-family:'Lato', Arial; font-size:13px; font-weight:400; margin:0;} .Button2{font-family:'Open Sans', Verdana; font-size:13px; font-weight:400; margin:0;} .Nav1 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:11px; font-weight:400; margin:0;} .Nav2 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:11px; font-weight:400; margin:0;} .Nav3 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:11px; font-weight:400; margin:0;} .Nav4 {font-family:'Lato', Arial; font-size:24px; font-weight:700; margin:0;} .Nav5 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:9px; font-weight:600; margin:0;} .HamburgerNav{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Accent {font-family:'Roboto Slab',Georgia; font-size:16px; font-weight:300; margin:0;} /* --------------- ----------------------------------------------------------*/ /* LAYOUT FOR PAGE HEADERS - LOGO, MENU, HEADER BACKGROUND-------------------*/ /*#InclementWeatherAlert{display:none;}*/ .HamburgerMenu{ visibility:visible; position:relative; float:right; padding-top:20px; padding-right:15px;} /*FOR MOBILE*/ .MainBackgroundImage{ width:100%; position:relative; height:auto;} .BGimg{ background-image:url("images/wi logo - header.svg"); background-repeat:no-repeat; margin-left:5px; height:40px; width:200px; position:absolute; top:18px; left:0px;} .BGimgSmall{ background-image:url(Images/WI_LogoSmall.png); background-repeat:no-repeat; margin-left:50px; margin-top:30px; height:55px; width:440px;float:left; } .HeaderBackground{height:60px;background:rgba(255,255,255,0.7); top: 0; left:0; width:100%; z-index:100; border-bottom-color:Black; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgba(0, 0, 0, 0.0); } .HeaderBackgroundDark{height:100px;background:rgba(255,255,255,1); border-bottom:1px solid black;} .HeaderContainer{height:60px;position:relative; width:100%; } .HeaderMenu{float:right; padding-right:30px; height:65px; position:relative; display:none;} .HeaderMenuContent{position:relative; top:50%; } /* ---------------------------------------------------------------------------*/ .PhoneIcon{background-image:url(images/general_icons_phone_icon.svg); background-repeat:no-repeat; width:30px; height:30px; float:right; margin-top:15px; padding-right:25px;} .PhoneIconWhite{background-image:url(Images/General_Icons_Phone_Icon_White.svg); background-repeat:no-repeat; width:30px; height:30px; float:right; margin-top:15px; padding-right:25px;} .WeatherAlertExtendedText{display:none;} /*.HeaderSubMenu {background-color:#58595b;}*/ .HeaderSubMenu {float:left; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; line-height:50px; color:White; width:100%} .HeaderSubMenu:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:50px; color:White;} .HeaderSubMenuLink:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink2 {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:50px; color:White;} .HeaderSubMenuLink2:hover{background-color:#ccc;color:Black; border-top-color:#0461b3;} #SubContentMenu {border-top:0px; position:absolute; width:100%; top:60px; display:none; height:50px;} #SubContentMenu2 {border-top:0px; position:absolute; width:100%; top:60px; display:none; height:50px;} .HeroButtonContainer{display:none;} /* HOME PAGE LOB LINKS - HOME, BUSINESS, LANDFILL, SPECIALTY ----------------*/ .LobItemsContainer {clear:left; width:100%; background-color:white;position:relative; overflow:hidden;padding-top:3px; padding-bottom:0px; margin-bottom:0px; height:385px;} /*.LobItemsContainer a { margin-top:30px}*/ .LobItemContainer {width:100%; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black;padding-bottom:0px; position:relative; height:60px ; padding-left:10px; background-color:white; margin-bottom:3px; } .LobItemTitle {position:relative; float:left; line-height:50px; width:20%; text-align:left; padding-bottom:0px; color:inherit; height:50px; vertical-align:middle; } /*.LobItemTitle {position:relative; text-align:center; text-decoration:none; color:black; font-weight:bold;background:white; height:70px; line-height:70px}*/ .LobItemIcon {position:relative; float:left; display:block; width:15%; height:50px; } .LobItemTypeDesc {margin-left:10%; margin-right:10%; color:black; margin-top:25px; display:none;} .HomePageLobSignUpText2{display:none;} /*.LobItemContainer {transition: background-color .5s; } .LobItemContainer:hover { background-color:#bbbdbf; color:White;} .LobItemContainer:hover .LobItemTypeDesc {visibility:hidden;} .LobItemContainer:hover .LobLinksContainer { display:block; z-index:3; } .LobItemContainer:hover .LobSeperator {visibility:hidden;} */ .LobItemContainer .LobLinksContainer{display:block;} .LobItemContainer .LobSeperator {visibility:hidden;} .LobLinksContainer {display:block; width:50%; float:left; height:50px; padding:0px; margin:0px;} .HomePageLobLearnMore{display:block; position:relative; width:50%; float:left; text-align:center; text-decoration:none; padding:0px; margin:0px; height:50px; color:gray; line-height:50px;} .HomePageLobSignup{display:block; position:relative; width:50%; float:left; text-align:center; text-decoration:none; height:50px; color:gray; line-height:50px;} .MobileLobDividerLine{width:90%; height:1px; background-color:Gray; margin:0 auto; margin-bottom:15px;} .HomeLobTitleText2{display:none;} #HomeCollectionItem{padding-top:10px; padding-bottom:10px; position:relative;} #BusinessCollectionItem{padding-top:10px; padding-bottom:10px; position:relative;} #SpecialtyCollectionItem{padding-top:10px; padding-bottom:10px; position:relative;} #LandfillCollectionItem{padding-top:10px; padding-bottom:10px; position:relative;} .HomeCollectionIconImg{background: url('images/main_icons_home_collection.svg');width:50px; height:50px;} .BusinessCollectionIconImg{background: url('images/main_icons_business_collection.svg');width:50px; height:50px;} .SpecialtyCollectionIconImg{background: url('images/main_icons_specialty_collection.svg');width:50px; height:50px;} .LandfillCollectionIconImg{background: url('images/main_icons_landfill_collection.svg');width:50px; height:50px;} /*#HomeCollectionItem:hover .HomeCollectionIconImg{background: url('Images/Main_Icons_White_Home_Collection.svg');} #BusinessCollectionItem:hover .BusinessCollectionIconImg{background: url('Images/Main_Icons_White_Business_Collection.svg');} #SpecialtyCollectionItem:hover .SpecialtyCollectionIconImg{background: url('Images/Main_Icons_White_Specialty_Collection.svg');} #LandfillCollectionItem:hover .LandfillCollectionIconImg{background: url('Images/Main_Icons_White_Landfill_Collection.svg');} */ .LobLinkButton {transition: background-color .5s; } .LobLinkButton:hover { background-color:#32c96f;} .HomePageTabTextContainer{width:100%; float:left;} .HomePageTabImageContainer{display:none;} #HomePageParalaxImage1{display:none;} #HomePageParalaxImage2{display:none;} #StoryText{display:none;} #CustomerSatisfactionSurveyLinkText1{display:none;} .HomePageLearnMoreText1{display:none;} /* Primary Page Service Navs ------------------------------------------------ */ /*.ServicesContainer {clear:left; width :100%; overflow:hidden; height:250px;}*/ .ServicesContainer {clear:left; width:100%; background-color:#249655; ;position:relative; overflow:hidden;padding-top:3px; padding-bottom:0px; margin-bottom:0px; height:385px; padding-left:10px;} .ServiceItem {height:100px; overflow:hidden; position:relative;} .ServiceItemMainContent {position:relative; text-align:center; margin-left:-1px; background-color:#249655; position:relative; transition: background-color .5s;} /*.ServiceItemMainContent:hover {background-color:#32c96f;}*/ .ServiceItemDivider{background-color:white; height:1px; width:95%; clear:both; margin-top:0px; display:block;} .ServiceItemTitle{float:left; width:30%; color:White; text-align:left; line-height:100px} .ServiceItemIcon{ float:left; width:20%; padding-top:20px;} .PrimaryCollectionNav{position:relative; float:right; width:50%; display:block;} .ResidentialLearnMore{display:block; float:left; width:50%; height:100px; line-height:100px; padding-top:0px; text-align:center; text-decoration:none;} .ResidentialSignUp{display:block; float:left; width:50%; height:100px; line-height:100px; padding-top:0px; text-align:center; text-decoration:none;} .ServiceButton {transition: background-color .5s; color:White; } .ServiceButton:hover { background-color:white; color:Black;} /*.ServiceItemMainContent:hover .PrimaryCollectionNav { display:block; z-index:3; } .ServiceItemMainContent:hover .icon {display:none;} */ #ResidentialWasteCollectionIcon{background: url('/Images/Home_Collection_Service_Icons_Waste_Collection.svg');width:50px; height:50px; background-repeat:no-repeat} .ResidentialWasteCollectionIcon{margin:0 auto;} #ResidentialRecyclingIcon{background: url('/images/home_collection_service_icons_recycling.svg');width:50px; height:50px; background-repeat:no-repeat} .ResidentialRecyclingIcon{margin:0 auto;} #ResidentialYardWasteIcon{background: url('/Images/Home_Collection_Service_Icons_Yard Waste.svg');width:50px; height:50px; background-repeat:no-repeat} .ResidentialYardWasteIcon{margin:0 auto;} #ResidentialHomeRenovationsIcon{background: url('/images/home_collection_service_icons_dumpster_rental.svg');width:50px; height:50px; background-repeat:no-repeat} .ResidentialHomeRenovationsIcon{margin:0 auto;} #CommercialDumpsterRentalIcon{background: url('/Images/Business_Collection_Service_Icons_Dumpster_Rental.svg');width:75px; height:75px; background-repeat:no-repeat} .CommercialDumpsterRentalIcon{margin:0 auto;} #CommercialRecyclingIcon{background: url('/Images/Business_Collection_Service_Icons_Recycling.svg');width:75px; height:75px; background-repeat:no-repeat} .CommercialRecyclingIcon{margin:0 auto;} #CommercialRollOffIcon{background: url('/Images/Business_Collection_Service_Icons_Roll-Off.svg');width:75px; height:75px; background-repeat:no-repeat} .CommercialRollOffIcon{margin:0 auto;} #CommercialCompactorsIcon{background: url('/Images/Business_Collection_Service_Icons_Compactors.svg');width:75px; height:75px; background-repeat:no-repeat} .CommercialCompactorsIcon{margin:0 auto;} #SpecialtyBrokerRelationsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Broker_Relations.svg');width:50px; height:50px; background-repeat:no-repeat} .SpecialtyBrokerRelationsIcon{margin:0 auto;} #SpecialtyCorporateAccountsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Corporate_Accounts.svg');width:50px; height:50px; background-repeat:no-repeat} .SpecialtyCorporateAccountsIcon{margin:0 auto;} #SpecialtyMunicipalContractsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Municipalities.svg');width:50px; height:50px; background-repeat:no-repeat} .SpecialtyMunicipalContractsIcon{margin:0 auto;} #SpecialtyHoaIcon{background: url('/Images/Specialty_Collection_Service_Icons_HOA_Services.svg');width:50px; height:50px; background-repeat:no-repeat} .SpecialtyHoaIcon{margin:0 auto;} .SpecialtySignUpText2{display:none;} /*-----------------------------------------------------------------------------/ /*GREEN BUTTON WITH ROUNDED CORNERS----------------------------------------------------------------------------*/ .linkButton { background-color:#249555; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ transition: background-color .5s; } .linkButton:hover{ background-color:#32c96f;} /* GREEN BUTTON IN HERO IMAGE BACKGROUND-----------------------------------------------------*/ .HeroButton { background-color:#249555; transition: background-color .5s; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ text-align:center; display:inline; height:60px; color:white; line-height:60px; margin-right:10px; padding:10px 30px 10px 30px; } .HeroButton:hover { background-color:#32c96f;} /* TABS IN COLLECTION PAGES ---------------------------------------------------------------------*/ .HeroLinkContainer{width:100%; height:50px; position:absolute; bottom:-10px; z-index:5;} .HeroLinkTab{width:25%; float:left;} .HeroLinkSelected{text-align:center; height:40px; line-height:40px; background-color:White; color:black; } .HeroLink {display:block; text-decoration:none; text-align:center; height:40px; line-height:40px; color:white;} .HeroLink:hover { height:40px; line-height:40px;background:rgba(166, 168, 171, 1)} /* HERO CONTENT ----------------------------------------------------------------------------------*/ .HeroIcon{color:white; width:100%; text-align:center; position:absolute; top:200px;} .HeroTitle {color:white; width:100%; text-align:center;} .HeroImageHomeCollection{background-image:url(Images/HomeCollectionMain.jpg);width:100%; height:500px; background-size:cover;} .HeroImageBusinessCollection{background-image:url(Images/HeroBusinessCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroImageLandfill{background-image:url(Images/WI2012_landfillP-0004v2.jpg);width:100%; height:500px; background-size:cover;} .HeroImageSpecialtyCollection{background-image:url(Images/HeroSpecialtyCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroFilter{background:rgba(0,0,0,0.4); position:absolute; width:100%; height:100%;z-index:1; top:0;} .SubHeroContainer {height:60px; position:relative; margin-top:0px;} .SubPageHeroTitle{color:white; width:100%; text-align:center;position:absolute; margin:0 auto; top:40%; clear:both;} .ServicesNavArrowContainer{position:absolute;width:100%;margin:0 auto; top:40%; z-index:4;} .HeroPageNavText{display:none;} .ArrowNavLeft {transition:font-size .2s, margin-left .2s; background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; margin-left:30px; width:150px; height:50px; display:block;float:left; text-align:left; color:White;padding-left:70px; padding-top:4px; text-decoration:none; } .ArrowNavRight { transition:font-size .2s, margin-right .2s; background-image:url(images/general_icons_right_arrow.svg); background-position:right; margin-right:30px; width:150px; background-repeat:no-repeat; height:50px; display:block; float:right; text-align:left; color:White;padding-left:50px; padding-top:4px; text-decoration:none; } .ArrowNavLeft:hover{margin-left:15px;} .ArrowNavRight:hover{margin-right:15px;} .HeroPageNavLeft {transition:font-size .2s, margin-left .2s; display:block;float:left; margin-left:30px; text-decoration:none; } .HeroPageNavRight { transition:font-size .2s, margin-right .2s; display:block;float:right; margin-right:30px; text-decoration:none; } .HeroPageNavLeft:hover{margin-left:15px;} .HeroPageNavRight:hover{margin-right:15px;} .HeroPageNavRightArrow {float:right; color:White; background-image:url(images/general_icons_right_arrow.svg);background-repeat:no-repeat; height:50px; width:40px; vertical-align:middle;} .HeroPageNavLeftArrow {display:inline-block; float:left; color:White; position:relative;background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; height:50px; width:40px; vertical-align:middle;} /*SUB PAGE LINK NAVIGATION -----------------------------------------------------------------------*/ .subNavContainer {color:#249555; padding-top:30px; clear:left;} .subNavContainer a{color:#249555; text-decoration:none;} .subNavContainer a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} /*-------------------------------------------------------------------------------------------------*/ .newsButton {height:60px; width:90px; color:#249555; text-align:center; line-height:60px; margin-top:10px; margin-right:10px; z-index:100; text-decoration:none;} .newsButton:hover{color:#32c96f; text-decoration:underline;} article{margin-left:10%; margin-right:10%; } .PageLinkContainer {clear:left; width :100%; overflow:hidden;} .PageLinkContainer .PageLink {background-color:#a6a8ab;} .PageLink { float:left; width:25%; height:90px; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; color:black; line-height:90px;} .PageLink.active{background-color:silver;} .SubPageMenuSeperatorLine {margin-left:20%; margin-right:20%; margin-top:40px; height:1px; background-color:silver;} /*Seconday Links ---------------------------------------------------*/ .SecondaryServicesContainer {clear:left; width:100%; position:relative; overflow:hidden;padding-top:3px; padding-bottom:0px; margin-bottom:0px; height:160px; } .SecondaryServiceItem {background-color:#e5e6e7; height:160px;transition: background-color .5s;} .SecondaryServiceItem:hover {background-color:#ccc;} .SecondaryServiceItemHeaderText{color:black; padding-top:70px;text-align:center; padding-bottom:15px;} .SecondaryServiceItemDivider {display:none; background-color:Black; height:210px; width:1px; float:right; margin-top:60px} .SecondaryLinksText {display:none;} /*------------------------------------------------------------------*/ .FooterImagesContainer{position:absolute; bottom:0; width:50%;} .FooterWiLogo{position:relative;float:left; height:40px; padding-left:4px;} .FooterErefLogo{position:relative;float:left;height:40px;} .FooterSocialIconsContainer{position:absolute; bottom:0; padding-bottom:0px; margin:0px; width:50%; left:50%} .FooterSocialIconsTitle{display:none;} .FooterCompanyLinksContainer{float:left;width:30%; padding-left:10%; padding-bottom:15px;} .FooterConnectLinksContainer{float:left;width:30%;} .FooterServicesLinksContainer{float:left;width:30%;} .FileNotFoundImage {z-index:50;background-image: url('/Images/404_Visual.svg'); background-repeat:no-repeat; width:300px; height:300px; position:relative; margin:0 auto; margin-top:50px;} .DumpsterImage{width:250px} .CompactorImage{width:250px;} .BillingOptionsDetails{position:relative;padding-top:20px; clear:both;} .BillingOptionsIcon{width:100%; text-align:center; margin:0 auto; display:block; position:relative;} .BillingOptionsSectionTitle{text-align:center;} .CharityClassContainer{height:315px;} .CharityClassTitle{padding-bottom:10px; text-align:center; padding-right:3%;} .CharityClassesImageLeft{position:relative; width:100%; margin-bottom:25px; } .CharityClassDescTextLeft{padding-right:5%; padding-left:5%;} .CharityClassesDescLeft{position:relative; } .CharityClassesImageRight{position:relative;width:100%; margin-bottom:25px;} .CharityClassesDescRight{position:relative;width:100%; margin-bottom:25px; } .CharityClassesDescRightContainer{position:relative; padding-left:5%; padding-right:5%;} .CharityClassesDescLeftContainer{position:relative; padding-left:5%; padding-right:5%;} .SpecialtyTabsText2{display:none;} .DonationItemLeft{width:100%; position:relative; clear:both; padding-top:20px;} .DonationItemRight{width:100%; position:relative; clear:both; padding-top:20px;} .DonationItemLeftContainer{position:relative; float:right; padding-right:0px;} .DonationItemRightContainer{position:relative; float:left; padding-right:0px;} } @media (min-width:481px) and (max-width:640px) /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ { /* FONT STYLES --------------------------------------------------------------*/ h1{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:32px; font-weight:800; margin:0} h2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:13px; font-weight:800; margin:0;} h3{font-family:'Roboto Slab',Georgia; font-size:26px; font-weight:400; margin:0;} h4{font-family:'Lato', Arial; font-size:14px; font-weight:700; margin:0;} h5{font-family:'Roboto Slab',Georgia; font-size:30px; font-weight:300; margin:0;} h6{font-family:'Roboto Slab',Georgia; font-size:48px; font-weight:300; margin:0;} .ArticleTitle {font-family:'Lato', Arial; font-size:2em; font-weight:700; margin:0;} .ArticleBody {font-family:'Lato', Arial; font-size:17px; font-weight:200; margin:0;} .ArticleBody1 {font-family:'Lato', Arial; font-size:16px; font-weight:300; margin:0;} .ArticleBody1 p {text-align:left;} .ArticleBody2 {font-family:'Lato', Arial; font-size:16px; font-weight:300; margin:0;} .ArticleBody1 a{color:#249555; text-decoration:none;} .ArticleBody1 a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} .Button1 {font-family:'Lato', Arial; font-size:16px; font-weight:400; margin:0;} .Button2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Nav1 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:11px; font-weight:400; margin:0;} .Nav2 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:12px; font-weight:400; margin:0;} .Nav3 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:14px; font-weight:400; margin:0;} .Nav4 {font-family:'Lato', Arial; font-size:24px; font-weight:700; margin:0;} .Nav5 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:11px; font-weight:600; margin:0;} .HamburgerNav{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Accent {font-family:'Roboto Slab',Georgia; font-size:16px; font-weight:300; margin:0;} /* --------------- ----------------------------------------------------------*/ .LinkHoverUnderline {text-decoration:none;} .LinkHoverUnderline:hover {text-decoration:underline;} /* LAYOUT FOR PAGE HEADERS - LOGO, MENU, HEADER BACKGROUND-------------------*/ /*#InclementWeatherAlert{display:none;}*/ .HamburgerMenu{ visibility:visible; position:relative; float:right; padding-top:20px; padding-right:15px;} /*FOR MOBILE*/ .MainBackgroundImage{ width:100%; position:relative; height:auto;} .BGimg{ background-image:url("images/wi logo - header.svg"); background-repeat:no-repeat; margin-left:5px; height:40px; width:280px; position:absolute; top:12px; left:0px;} .BGimgSmall{ background-image:url(Images/WI_LogoSmall.png); background-repeat:no-repeat; margin-left:50px; margin-top:30px; height:55px; width:440px;float:left; } .HeaderBackground{height:60px;background:rgba(255,255,255,0.7); top: 0; left:0; width:100%; z-index:100; border-bottom-color:Black; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgba(0, 0, 0, 0.0); } .HeaderBackgroundDark{height:100px;background:rgba(255,255,255,1); border-bottom:1px solid black;} .HeaderContainer{height:60px;position:relative; width:100%; } .HeaderMenu{float:right; padding-right:30px; height:65px; position:relative; display:none;} .HeaderMenuContent{position:relative; top:50%; } /* ---------------------------------------------------------------------------*/ .PhoneIcon{background-image:url(images/general_icons_phone_icon.svg); background-repeat:no-repeat; width:30px; height:30px; float:right; margin-top:15px; padding-right:25px;} .PhoneIconWhite{background-image:url(Images/General_Icons_Phone_Icon_White.svg); background-repeat:no-repeat; width:30px; height:30px; float:right; margin-top:15px; padding-right:25px;} .WeatherAlertExtendedText{display:none;} .HeroButtonContainer{display:none;} /*.HeaderSubMenu {background-color:#58595b;}*/ .HeaderSubMenu {float:left; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; line-height:50px; color:White; width:100%} .HeaderSubMenu:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:50px; color:White;} .HeaderSubMenuLink:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink2 {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:50px; color:White;} .HeaderSubMenuLink2:hover{background-color:#ccc;color:Black; border-top-color:#0461b3;} #SubContentMenu {border-top:0px; position:absolute; width:100%; top:60px; display:none; height:50px;} #SubContentMenu2 {border-top:0px; position:absolute; width:100%; top:60px; display:none; height:50px;} /* HOME PAGE LOB LINKS - HOME, BUSINESS, LANDFILL, SPECIALTY ----------------*/ .LobItemsContainer {clear:left; width:100%; background-color:white;position:relative; overflow:hidden;padding-top:3px; padding-bottom:0px; margin-bottom:0px; height:315px;} /*.LobItemsContainer a { margin-top:30px}*/ .LobItemContainer {width:100%; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black;padding-bottom:0px; position:relative; height:60px ; padding-left:10px; background-color:white; margin-bottom:3px; } .LobItemTitle {position:relative; float:left; line-height:50px; width:20%; text-align:left; padding-bottom:0px; color:inherit; height:50px; vertical-align:middle; } /*.LobItemTitle {position:relative; text-align:center; text-decoration:none; color:black; font-weight:bold;background:white; height:70px; line-height:70px}*/ .LobItemIcon {position:relative; float:left; display:block; width:15%; height:50px; } .LobItemTypeDesc {margin-left:10%; margin-right:10%; color:black; margin-top:25px; display:none;} .HomePageLobSignUpText2{display:none;} /*.LobItemContainer {transition: background-color .5s; } .LobItemContainer:hover { background-color:#bbbdbf; color:White;} .LobItemContainer:hover .LobItemTypeDesc {visibility:hidden;} .LobItemContainer:hover .LobLinksContainer { display:block; z-index:3; } .LobItemContainer:hover .LobSeperator {visibility:hidden;} */ .LobItemContainer .LobLinksContainer{display:block;} .LobItemContainer .LobSeperator {visibility:hidden;} .LobLinksContainer {display:block; width:50%; float:left; height:50px; padding:0px; margin:0px;} .HomePageLobLearnMore{display:block; position:relative; width:50%; float:left; text-align:center; text-decoration:none; padding:0px; margin:0px; height:50px; color:gray; line-height:50px;} .HomePageLobSignup{display:block; position:relative; width:50%; float:left; text-align:center; text-decoration:none; height:50px; color:gray; line-height:50px;} .MobileLobDividerLine{width:90%; height:1px; background-color:Gray; margin:0 auto; margin-bottom:15px;} .HomeLobTitleText2{display:none;} .HomeCollectionIconImg{background: url('images/main_icons_home_collection.svg');width:50px; height:50px;} .BusinessCollectionIconImg{background: url('images/main_icons_business_collection.svg');width:50px; height:50px;} .SpecialtyCollectionIconImg{background: url('images/main_icons_specialty_collection.svg');width:50px; height:50px;} .LandfillCollectionIconImg{background: url('images/main_icons_landfill_collection.svg');width:50px; height:50px;} /*#HomeCollectionItem:hover .HomeCollectionIconImg{background: url('Images/Main_Icons_White_Home_Collection.svg');} #BusinessCollectionItem:hover .BusinessCollectionIconImg{background: url('Images/Main_Icons_White_Business_Collection.svg');} #SpecialtyCollectionItem:hover .SpecialtyCollectionIconImg{background: url('Images/Main_Icons_White_Specialty_Collection.svg');} #LandfillCollectionItem:hover .LandfillCollectionIconImg{background: url('Images/Main_Icons_White_Landfill_Collection.svg');}*/ .LobLinkButton {transition: background-color .5s; } .LobLinkButton:hover { background-color:#32c96f;} .HomePageTabTextContainer{width:70%; float:left;} .HomePageTabImageContainer{width:30%; float:left; text-align:center;} #HomePageParalaxImage1{display:none;} #HomePageParalaxImage2{display:none;} #StoryText{display:none;} #CustomerSatisfactionSurveyLinkText1{display:none;} /* Primary Page Service Navs ------------------------------------------------ */ /*.ServicesContainer {clear:left; width :100%; overflow:hidden; height:250px;}*/ .ServicesContainer {clear:left; width:100%; background-color:#249655; ;position:relative; overflow:hidden;padding-top:3px; padding-bottom:0px; margin-bottom:0px; height:385px; padding-left:10px;} .ServiceItem {height:100px; overflow:hidden; position:relative;} .ServiceItemMainContent {position:relative; text-align:center; margin-left:-1px; background-color:#249655; position:relative; transition: background-color .5s;} /*.ServiceItemMainContent:hover {background-color:#32c96f;}*/ .ServiceItemDivider{background-color:white; height:1px; width:95%; clear:both; margin-top:0px; display:block;} .ServiceItemTitle{float:left; width:30%; color:White; text-align:left; line-height:100px} .ServiceItemIcon{ float:left; width:20%; padding-top:20px;} .PrimaryCollectionNav{position:relative; float:right; width:50%; display:block;} .ResidentialLearnMore{display:block; float:left; width:50%; height:100px; line-height:100px; padding-top:0px; text-align:center; text-decoration:none;} .ResidentialSignUp{display:block; float:left; width:50%; height:100px; line-height:100px; padding-top:0px; text-align:center; text-decoration:none;} .ServiceButton {transition: background-color .5s; color:White; } .ServiceButton:hover { background-color:white; color:Black;} /*.ServiceItemMainContent:hover .PrimaryCollectionNav { display:block; z-index:3; } .ServiceItemMainContent:hover .icon {display:none;} */ #ResidentialWasteCollectionIcon{background: url('/Images/Home_Collection_Service_Icons_Waste_Collection.svg');width:50px; height:50px; background-repeat:no-repeat} .ResidentialWasteCollectionIcon{margin:0 auto;} #ResidentialRecyclingIcon{background: url('/images/home_collection_service_icons_recycling.svg');width:50px; height:50px; background-repeat:no-repeat} .ResidentialRecyclingIcon{margin:0 auto;} #ResidentialYardWasteIcon{background: url('/Images/Home_Collection_Service_Icons_Yard Waste.svg');width:50px; height:50px; background-repeat:no-repeat} .ResidentialYardWasteIcon{margin:0 auto;} #ResidentialHomeRenovationsIcon{background: url('/images/home_collection_service_icons_dumpster_rental.svg');width:50px; height:50px; background-repeat:no-repeat} .ResidentialHomeRenovationsIcon{margin:0 auto;} #CommercialDumpsterRentalIcon{background: url('/Images/Business_Collection_Service_Icons_Dumpster_Rental.svg');width:75px; height:75px; background-repeat:no-repeat} .CommercialDumpsterRentalIcon{margin:0 auto;} #CommercialRecyclingIcon{background: url('/Images/Business_Collection_Service_Icons_Recycling.svg');width:75px; height:75px; background-repeat:no-repeat} .CommercialRecyclingIcon{margin:0 auto;} #CommercialRollOffIcon{background: url('/Images/Business_Collection_Service_Icons_Roll-Off.svg');width:75px; height:75px; background-repeat:no-repeat} .CommercialRollOffIcon{margin:0 auto;} #CommercialCompactorsIcon{background: url('/Images/Business_Collection_Service_Icons_Compactors.svg');width:75px; height:75px; background-repeat:no-repeat} .CommercialCompactorsIcon{margin:0 auto;} #SpecialtyBrokerRelationsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Broker_Relations.svg');width:50px; height:50px; background-repeat:no-repeat} .SpecialtyBrokerRelationsIcon{margin:0 auto;} #SpecialtyCorporateAccountsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Corporate_Accounts.svg');width:50px; height:50px; background-repeat:no-repeat} .SpecialtyCorporateAccountsIcon{margin:0 auto;} #SpecialtyMunicipalContractsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Municipalities.svg');width:50px; height:50px; background-repeat:no-repeat} .SpecialtyMunicipalContractsIcon{margin:0 auto;} #SpecialtyHoaIcon{background: url('/Images/Specialty_Collection_Service_Icons_HOA_Services.svg');width:50px; height:50px; background-repeat:no-repeat} .SpecialtyHoaIcon{margin:0 auto;} .SpecialtySignUpText2{display:none;} /*GREEN BUTTON WITH ROUNDED CORNERS----------------------------------------------------------------------------*/ .linkButton { background-color:#249555; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ transition: background-color .5s; } .linkButton:hover{ background-color:#32c96f;} /* GREEN BUTTON IN HERO IMAGE BACKGROUND-----------------------------------------------------*/ .HeroButton { background-color:#249555; transition: background-color .5s; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ text-align:center; display:inline; height:60px; color:white; line-height:60px; margin-right:10px; padding:10px 30px 10px 30px; } .HeroButton:hover { background-color:#32c96f;} /* TABS IN COLLECTION PAGES ---------------------------------------------------------------------*/ .HeroLinkContainer{width:100%; height:50px; position:absolute; bottom:-10px; z-index:5;} .HeroLinkTab{width:25%; float:left;} .HeroLinkSelected{text-align:center; height:40px; line-height:40px; background-color:White; color:black; } .HeroLink {display:block; text-decoration:none; text-align:center; height:40px; line-height:40px; color:white;} .HeroLink:hover { height:40px; line-height:40px;background:rgba(166, 168, 171, 1)} /* HERO CONTENT ----------------------------------------------------------------------------------*/ .HeroIcon{color:white; width:100%; text-align:center; position:absolute; top:200px;} .HeroTitle {color:white; width:100%; text-align:center;} .HeroImageHomeCollection{background-image:url(Images/HomeCollectionMain.jpg);width:100%; height:500px; background-size:cover;} .HeroImageBusinessCollection{background-image:url(Images/HeroBusinessCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroImageLandfill{background-image:url(Images/WI2012_landfillP-0004v2.jpg);width:100%; height:500px; background-size:cover;} .HeroImageSpecialtyCollection{background-image:url(Images/HeroSpecialtyCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroFilter{background:rgba(0,0,0,0.4); position:absolute; width:100%; height:100%;z-index:1; top:0;} .SubHeroContainer {height:60px; position:relative; margin-top:0px;} .SubPageHeroTitle{color:white; width:100%; text-align:center;position:absolute; margin:0 auto; top:40%; clear:both;} .ServicesNavArrowContainer{position:absolute; width:100%;margin:0 auto; top:40%; z-index:4;} .HeroPageNavText{display:none;} .ArrowNavLeft {transition:font-size .2s, margin-left .2s; background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; margin-left:30px; width:200px; height:63px; display:block;float:left; text-align:left; color:White;padding-left:70px; padding-top:4px; text-decoration:none; } .ArrowNavRight { transition:font-size .2s, margin-right .2s; background-image:url(images/general_icons_right_arrow.svg); background-position:right; margin-right:30px; width:220px; background-repeat:no-repeat; height:63px; display:block; float:right; text-align:left; color:White;padding-left:50px; padding-top:4px; text-decoration:none; } .ArrowNavLeft:hover{margin-left:15px;} .ArrowNavRight:hover{margin-right:15px;} .HeroPageNavLeft {transition:font-size .2s, margin-left .2s; display:block;float:left; margin-left:30px; text-decoration:none; } .HeroPageNavRight { transition:font-size .2s, margin-right .2s; display:block;float:right; margin-right:30px; text-decoration:none; } .HeroPageNavLeft:hover{margin-left:15px;} .HeroPageNavRight:hover{margin-right:15px;} .HeroPageNavRightArrow {float:right; color:White; background-image:url(images/general_icons_right_arrow.svg);background-repeat:no-repeat; height:70px; width:50px; vertical-align:middle;} .HeroPageNavLeftArrow {display:inline-block; float:left; color:White; position:relative;background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; height:70px; width:50px; vertical-align:middle;} /*SUB PAGE LINK NAVIGATION -----------------------------------------------------------------------*/ .subNavContainer {color:#249555; padding-top:30px; clear:left;} .subNavContainer a{color:#249555; text-decoration:none;} .subNavContainer a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} /*-------------------------------------------------------------------------------------------------*/ .newsButton {height:60px; width:90px; color:#249555; text-align:center; line-height:60px; margin-top:10px; margin-right:10px; z-index:100; text-decoration:none;} .newsButton:hover{color:#32c96f; text-decoration:underline;} article{margin-left:10%; margin-right:10%; } .PageLinkContainer {clear:left; width :100%; overflow:hidden;} .PageLinkContainer .PageLink {background-color:#a6a8ab;} .PageLink { float:left; width:25%; height:90px; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; color:black; line-height:90px;} .PageLink.active{background-color:silver;} /*Seconday Links ---------------------------------------------------*/ .SecondaryServicesContainer {clear:left; width:100%; position:relative; overflow:hidden;padding-top:3px; padding-bottom:0px; margin-bottom:0px; height:160px; } .SecondaryServiceItem {background-color:#e5e6e7; height:160px;transition: background-color .5s;} .SecondaryServiceItem:hover {background-color:#ccc;} .SecondaryServiceItemHeaderText{color:black; padding-top:70px;text-align:center; padding-bottom:15px;} .SecondaryServiceItemDivider {display:none; background-color:Black; height:210px; width:1px; float:right; margin-top:60px} .SecondaryLinksText {display:none;} /*------------------------------------------------------------------*/ .SubPageMenuSeperatorLine {margin-left:20%; margin-right:20%; margin-top:40px; height:1px; background-color:silver;} .FooterImagesContainer{position:absolute; bottom:0; width:50%;} .FooterWiLogo{position:relative;float:left; height:40px; padding-left:4px;} .FooterErefLogo{position:relative;float:left;height:40px;} .FooterSocialIconsContainer{position:absolute; bottom:0; padding-bottom:0px; margin:0px; width:50%; left:50%;} .FooterSocialIconsTitle{display:none;} .FooterCompanyLinksContainer{float:left;width:30%; padding-left:10%; padding-bottom:15px;} .FooterConnectLinksContainer{float:left;width:30%;} .FooterServicesLinksContainer{float:left;width:30%;} .FileNotFoundImage {z-index:50;background-image: url('/Images/404_Visual.svg'); background-repeat:no-repeat; width:350px; height:350px; position:relative; margin:0 auto; margin-top:50px;} .DumpsterImage{width:350px} .CompactorImage{width:350px;} .BillingOptionsDetails{position:relative;padding-top:20px; clear:both;} .BillingOptionsIcon{width:100%; text-align:center; margin:0 auto; display:block; position:relative;} .BillingOptionsSectionTitle{text-align:center;} .CharityClassContainer{height:65vw;} .CharityClassTitle{padding-bottom:10px; text-align:center;} .CharityClassesImageLeft{margin:0 auto; text-align: center; padding-bottom: 25px; } .CharityClassDescTextLeft{padding-right:12%; padding-left:12%;} .CharityClassesDescLeft{position:relative; } .CharityClassesImageRight{margin:0 auto; text-align: center; padding-bottom: 25px;} .CharityClassesDescRight{position:relative; } .CharityClassesDescRightContainer{position:relative; padding-left:12%; padding-right:12%;} .SpecialtyTabsText{display:none;} .DonationItemLeft{width:100%; position:relative; clear:both; padding-top:20px;} .DonationItemRight{width:100%; position:relative; clear:both; padding-top:20px;} .DonationItemLeftContainer{position:relative; float:right; padding-right:0px;} .DonationItemRightContainer{position:relative; float:left; padding-right:0px;} } @media (min-width:641px) and (max-width:800px) /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ { /* FONT STYLES --------------------------------------------------------------*/ h1{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:44px; font-weight:800; margin:0} h2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:800; margin:0;} h3{font-family:'Roboto Slab',Georgia; font-size:48px; font-weight:400; margin:0;} h4{font-family:'Lato', Arial; font-size:16px; font-weight:700; margin:0;} h5{font-family:'Roboto Slab',Georgia; font-size:32px; font-weight:300; margin:0;} h6{font-family:'Roboto Slab',Georgia; font-size:32px; font-weight:300; margin:0;} .ArticleTitle {font-family:'Lato', Arial; font-size:2em; font-weight:700; margin:0;} .ArticleBody {font-family:'Lato', Arial; font-size:17px; font-weight:200; margin:0;} .ArticleBody1 {font-family:'Lato', Arial; font-size:13px; font-weight:300; margin:0;} .ArticleBody1 p {text-align:left;} .ArticleBody2 {font-family:'Lato', Arial; font-size:16px; font-weight:300; margin:0;} .ArticleBody1 a{color:#249555; text-decoration:none;} .ArticleBody1 a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} .Button1 {font-family:'Lato', Arial; font-size:16px; font-weight:400; margin:0;} .Button2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Nav1 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Nav2 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Nav3 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Nav4 {font-family:'Lato', Arial; font-size:11px; font-weight:700; margin:0;} .Nav5 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:11px; font-weight:600; margin:0;} .HamburgerNav{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Accent {font-family:'Roboto Slab',Georgia; font-size:11px; font-weight:300; margin:0;} /* --------------- ----------------------------------------------------------*/ .LinkHoverUnderline {text-decoration:none;} .LinkHoverUnderline:hover {text-decoration:underline;} /* LAYOUT FOR PAGE HEADERS - LOGO, MENU, HEADER BACKGROUND-------------------*/ /*.HamburgerMenu{ visibility:visible; position:relative; float:right; padding-top:20px; padding-right:15px;} .MainBackgroundImage{ width:100%; position:relative; height:auto;} .BGimg{ background-image:url(Images/WI_Logo.svg); background-repeat:no-repeat; margin-left:5px; height:65px; width:500px; position:absolute; top:0px; left:0px; left:0px;} .BGimgSmall{ background-image:url(Images/WI_LogoSmall.png); background-repeat:no-repeat; margin-left:50px; margin-top:30px; height:55px; width:440px;float:left; } .HeaderBackground{height:60px;background:rgba(255,255,255,0.7); top: 0; left:0; width:100%; z-index:100; border-bottom-color:Black; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgba(0, 0, 0, 0.0); } .HeaderBackgroundDark{height:100px;background:rgba(255,255,255,1); border-bottom:1px solid black;} .HeaderContainer{height:60px;position:absolute; width:100%; } .HeaderMenu{ position:absolute; right:0; height:80px; display:none; } .HeaderMenuContent{position:relative; }*/ .HamburgerMenu{ visibility:visible; position:relative; float:right; padding-top:20px; padding-right:15px;} /*FOR MOBILE*/ /*#InclementWeatherAlert{display:none;}*/ .MainBackgroundImage{ width:100%; position:relative; height:auto;} .BGimg{ background-image:url("images/wi logo - header.svg"); background-repeat:no-repeat; margin-left:5px; height:40px; width:280px; position:absolute; top:12px; left:0px;} .BGimgSmall{ background-image:url(Images/WI_LogoSmall.png); background-repeat:no-repeat; margin-left:50px; margin-top:30px; height:55px; width:440px;float:left; } .HeaderBackground{height:60px;background:rgba(255,255,255,0.7); top: 0; left:0; width:100%; z-index:100; border-bottom-color:Black; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgba(0, 0, 0, 0.0); } .HeaderBackgroundDark{height:100px;background:rgba(255,255,255,1); border-bottom:1px solid black;} .HeaderContainer{height:60px;position:relative; width:100%; } .HeaderMenu{float:right; padding-right:30px; height:65px; position:relative; display:none;} .HeaderMenuContent{position:relative; top:50%; } /* ---------------------------------------------------------------------------*/ .PhoneIcon{ display:none; background-image:url(images/general_icons_phone_icon.svg); background-repeat:no-repeat; width:30px; height:30px; float:right; margin-top:15px; padding-right:25px;} .PhoneIconWhite{ display:none; background-image:url(Images/General_Icons_Phone_Icon_White.svg); background-repeat:no-repeat; width:30px; height:30px; float:right; margin-top:15px; padding-right:25px;} .HeroButtonContainer{display:none;} /*.HeaderSubMenu {background-color:#58595b;}*/ .HeaderSubMenu {float:left; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; line-height:50px; color:White; width:100%} .HeaderSubMenu:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:50px; color:White;} .HeaderSubMenuLink:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink2 {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:50px; color:White;} .HeaderSubMenuLink2:hover{background-color:#ccc;color:Black; border-top-color:#0461b3;} #SubContentMenu {border-top:0px; position:absolute; width:100%; top:60px; display:none; height:50px;} #SubContentMenu2 {border-top:0px; position:absolute; width:100%; top:60px; display:none; height:50px;} /* HOME PAGE LOB LINKS - HOME, BUSINESS, LANDFILL, SPECIALTY ----------------*/ .LobItemsContainer {clear:left; width:100%; background-color:white; padding-bottom:0px; padding-top:35px; position:relative; overflow:hidden;font-family:Verdana;padding-top:0px; padding-bottom:0px; margin-bottom:0px; height:380px} .LobItemsContainer a { margin-top:30px} .LobItemContainer {float:left; width:25%; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black;padding-top:50px; padding-bottom:0px; position:relative; height:390px ; padding-left:0px;} .LobItemTitle { position:relative; left:0;text-align:center; padding-bottom:0px; color:inherit; padding-bottom:15px;} /*.LobItemTitle {position:relative; top:25%; text-align:center; text-decoration:none; color:black; font-weight:bold;background:white; height:70px; line-height:70px}*/ .LobItemIcon {float:none; text-align:center; margin:0 auto; display:block; clear:left; width:90px; height:90px;} .LobItemTypeDesc {margin-left:10%; margin-right:10%; color:black; margin-top:25px; display:block;} .LobItemContainer .LobSeperator {visibility:visible;} .LobItemContainer {float:left; width:25%; transition: background-color .5s; } .LobItemContainer:hover { background-color:#bbbdbf; color:White;} .LobItemContainer:hover .LobItemTypeDesc {visibility:hidden;} .LobItemContainer:hover .LobLinksContainer { display:block; z-index:3; } .LobItemContainer:hover .LobSeperator {visibility:hidden;} .LobLinksContainer {display:none; position:absolute; top:220px; height:165px; width:100%; transition: display 1s; } .HomePageLobLearnMore{display:block; width:100%; height:80px; line-height:80px; position:absolute; top:-30px; padding-top:0px; text-align:center; text-decoration:none;} .HomePageLobSignup{width:100%; height:80px; line-height:80px; position:absolute; top:50px; text-align:center;padding-top:0px; text-decoration:none;} #BusinessCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} #SpecialtyCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} #LandfillCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} .HomeCollectionIconImg{background: url('images/main_icons_home_collection.svg');width:100px; height:100px;} .BusinessCollectionIconImg{background: url('images/main_icons_business_collection.svg');width:100px; height:100px;} .SpecialtyCollectionIconImg{background: url('images/main_icons_specialty_collection.svg');width:100px; height:100px;} .LandfillCollectionIconImg{background: url('images/main_icons_landfill_collection.svg');width:100px; height:100px;} #HomeCollectionItem:hover .HomeCollectionIconImg{background: url('Images/Main_Icons_White_Home_Collection.svg');} #BusinessCollectionItem:hover .BusinessCollectionIconImg{background: url('Images/Main_Icons_White_Business_Collection.svg');} #SpecialtyCollectionItem:hover .SpecialtyCollectionIconImg{background: url('Images/Main_Icons_White_Specialty_Collection.svg');} #LandfillCollectionItem:hover .LandfillCollectionIconImg{background: url('Images/Main_Icons_White_Landfill_Collection.svg');} .LobLinkButton {transition: background-color .5s; color:White; background-color:inherit;} .LobLinkButton:hover { background-color:#32c96f;} .HomePageTabTextContainer{width:100%; float:left;} .HomePageTabImageContainer{display:none;} #CustomerSatisfactionSurveyLinkText1{display:none;} /* Primary Page Service Navs ------------------------------------------------ */ .ServicesContainer {clear:left; width :100%; overflow:hidden; height:250px;} .ServiceItem {float:left; width:25%;min-width:85px; height:250px; overflow:hidden; position:relative;} .ServiceItemMainContent {position:relative; height:250px; text-align:center; margin-left:-1px; background-color:#249655; position:relative; transition: background-color .5s;} .ServiceItemMainContent:hover {background-color:#32c96f;} .PrimaryCollectionNav{display:none; margin-top:2px; height:150px;} .ServiceItemDivider{background-color:white; height:160px; width:2px; float:left; margin-top:45px;} .ServiceItemTitle{color:White; padding-top:40px;} .ServiceItemMainContent:hover .PrimaryCollectionNav { display:block; z-index:3; } .ServiceItemMainContent:hover .icon {display:none;} .ServiceItemIcon{padding-top:20px;} #ResidentialWasteCollectionIcon{background: url('/Images/Home_Collection_Service_Icons_Waste_Collection.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialWasteCollectionIcon{margin:0 auto;} #ResidentialRecyclingIcon{background: url('/images/home_collection_service_icons_recycling.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialRecyclingIcon{margin:0 auto;} #ResidentialYardWasteIcon{background: url('/Images/Home_Collection_Service_Icons_Yard Waste.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialYardWasteIcon{margin:0 auto;} #ResidentialHomeRenovationsIcon{background: url('/images/home_collection_service_icons_dumpster_rental.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialHomeRenovationsIcon{margin:0 auto;} #CommercialDumpsterRentalIcon{background: url('/Images/Business_Collection_Service_Icons_Dumpster_Rental.svg');width:125px; height:125px; background-repeat:no-repeat} .CommercialDumpsterRentalIcon{margin:0 auto;} #CommercialRecyclingIcon{background: url('/Images/Business_Collection_Service_Icons_Recycling.svg');width:125px; height:125px; background-repeat:no-repeat} .CommercialRecyclingIcon{margin:0 auto;} #CommercialRollOffIcon{background: url('/Images/Business_Collection_Service_Icons_Roll-Off.svg');width:125px; height:125px; background-repeat:no-repeat} .CommercialRollOffIcon{margin:0 auto;} #CommercialCompactorsIcon{background: url('/Images/Business_Collection_Service_Icons_Compactors.svg');width:125px; height:125px; background-repeat:no-repeat} .CommercialCompactorsIcon{margin:0 auto;} #SpecialtyBrokerRelationsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Broker_Relations.svg');width:100px; height:100px; background-repeat:no-repeat} .SpecialtyBrokerRelationsIcon{margin:0 auto;} #SpecialtyCorporateAccountsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Corporate_Accounts.svg');width:100px; height:100px; background-repeat:no-repeat} .SpecialtyCorporateAccountsIcon{margin:0 auto;} #SpecialtyMunicipalContractsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Municipalities.svg');width:100px; height:100px; background-repeat:no-repeat} .SpecialtyMunicipalContractsIcon{margin:0 auto;} #SpecialtyHoaIcon{background: url('/Images/Specialty_Collection_Service_Icons_HOA_Services.svg');width:100px; height:100px; background-repeat:no-repeat} .SpecialtyHoaIcon{margin:0 auto;} .SpecialtySignUpText2{display:none;} .ResidentialLearnMore{display:block; width:100%; height:75px; line-height:75px; position:relative; padding-top:0px; text-align:center; text-decoration:none;} .ResidentialSignUp{display:block; width:100%; height:75px; line-height:75px; position:relative; text-align:center;padding-top:0px; text-decoration:none;} .ServiceButton {transition: background-color .5s; color:White; } .ServiceButton:hover { background-color:white; color:Black;} /*-----------------------------------------------------------------------------/ /*GREEN BUTTON WITH ROUNDED CORNERS----------------------------------------------------------------------------*/ .linkButton { background-color:#249555; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ transition: background-color .5s; } .linkButton:hover{ background-color:#32c96f;} /* GREEN BUTTON IN HERO IMAGE BACKGROUND-----------------------------------------------------*/ .HeroButton { background-color:#249555; transition: background-color .5s; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ text-align:center; display:inline; height:60px; color:white; line-height:60px; margin-right:10px; padding:10px 30px 10px 30px; } .HeroButton:hover { background-color:#32c96f;} /* TABS IN COLLECTION PAGES ---------------------------------------------------------------------*/ .HeroLinkContainer{width:100%; height:50px; position:absolute; bottom:-10px; z-index:5;} .HeroLinkTab{width:25%; float:left;} .HeroLinkSelected{text-align:center; height:40px; line-height:40px; background-color:White; color:black; } .HeroLink {display:block; text-decoration:none; text-align:center; height:40px; line-height:40px; color:white;} .HeroLink:hover { height:40px; line-height:40px;background:rgba(166, 168, 171, 1)} /* HERO CONTENT ----------------------------------------------------------------------------------*/ .HeroIcon{color:white; width:100%; text-align:center; position:absolute; top:200px;} .HeroTitle {color:white; width:100%; text-align:center;} .HeroImageHomeCollection{background-image:url(Images/HomeCollectionMain.jpg);width:100%; height:500px; background-size:cover;} .HeroImageBusinessCollection{background-image:url(Images/HeroBusinessCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroImageLandfill{background-image:url(Images/WI2012_landfillP-0004v2.jpg);width:100%; height:500px; background-size:cover;} .HeroImageSpecialtyCollection{background-image:url(Images/HeroSpecialtyCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroFilter{background:rgba(0,0,0,0.4); position:absolute; width:100%; height:100%;z-index:1; top:0;} .SubHeroContainer {height:60px; position:relative; margin-top:0px;} .SubPageHeroTitle{color:white; width:100%; text-align:center;position:absolute; margin:0 auto; top:40%; clear:both;} .ServicesNavArrowContainer{position:absolute; width:100%;margin:0 auto; top:45%; z-index:4;} .HeroPageNavText{display:none;} .ArrowNavLeft {transition:font-size .2s, margin-left .2s; background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; margin-left:30px; width:200px; height:63px; display:block;float:left; text-align:left; color:White;padding-left:70px; padding-top:4px; text-decoration:none; } .ArrowNavRight { transition:font-size .2s, margin-right .2s; background-image:url(images/general_icons_right_arrow.svg); background-position:right; margin-right:30px; width:220px; background-repeat:no-repeat; height:63px; display:block; float:right; text-align:left; color:White;padding-left:50px; padding-top:4px; text-decoration:none; } .ArrowNavLeft:hover{margin-left:15px;} .ArrowNavRight:hover{margin-right:15px;} .HeroPageNavLeft {transition:font-size .2s, margin-left .2s; display:block;float:left; margin-left:30px; text-decoration:none; } .HeroPageNavRight { transition:font-size .2s, margin-right .2s; display:block;float:right; margin-right:30px; text-decoration:none; } .HeroPageNavLeft:hover{margin-left:15px;} .HeroPageNavRight:hover{margin-right:15px;} .HeroPageNavRightArrow {float:right; color:White; background-image:url(images/general_icons_right_arrow.svg);background-repeat:no-repeat; height:70px; width:50px; vertical-align:middle;} .HeroPageNavLeftArrow {display:inline-block; float:left; color:White; position:relative;background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; height:70px; width:50px; vertical-align:middle;} /*SUB PAGE LINK NAVIGATION -----------------------------------------------------------------------*/ .subNavContainer {color:#249555; padding-top:30px; clear:left;} .subNavContainer a{color:#249555; text-decoration:none;} .subNavContainer a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} /*-------------------------------------------------------------------------------------------------*/ .newsButton {height:60px; width:90px; color:#249555; text-align:center; line-height:60px; margin-top:10px; margin-right:10px; z-index:100; text-decoration:none;} .newsButton:hover{color:#32c96f; text-decoration:underline;} article{margin-left:10%; margin-right:10%; } .PageLinkContainer {clear:left; width :100%; overflow:hidden;} .PageLinkContainer .PageLink {background-color:#a6a8ab;} .PageLink { float:left; width:25%; height:90px; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; color:black; line-height:90px;} .PageLink.active{background-color:White;} /*Seconday Links ---------------------------------------------------*/ .SecondaryServicesContainer {clear:left; width:100%; position:relative; overflow:hidden;padding-top:3px; padding-bottom:0px; margin-bottom:0px; height:280px; } .SecondaryServiceItem {background-color:#e5e6e7; height:280px;transition: background-color .5s;} .SecondaryServiceItem:hover {background-color:#ccc;} .SecondaryServiceItemHeaderText{color:black; padding-top:80px;text-align:center; padding-bottom:15px;} .SecondaryServiceItemDivider {background-color:Black; height:175px; width:1px; float:right; margin-top:50px} .SecondaryLinksText {display:block;} /*------------------------------------------------------------------*/ .SubPageMenuSeperatorLine {margin-left:20%; margin-right:20%; margin-top:40px; height:1px; background-color:silver;} .FooterImagesContainer{position:absolute; bottom:0; width:50%;} .FooterWiLogo{position:relative;float:left; height:40px; padding-left:4px;} .FooterErefLogo{position:relative;float:left;height:40px;} .FooterSocialIconsContainer{position:absolute; bottom:0; padding-bottom:0px; margin:0px; width:50%; left:50%} .FooterSocialIconsTitle{display:none;} .FooterCompanyLinksContainer{float:left;width:30%; padding-left:10%; padding-bottom:15px;} .FooterConnectLinksContainer{float:left;width:30%;} .FooterServicesLinksContainer{float:left;width:30%;} .FileNotFoundImage {z-index:50;background-image: url('/Images/404_Visual.svg'); background-repeat:no-repeat; width:400px; height:400px; position:relative; margin:0 auto; margin-top:50px;} .DumpsterImage{width:450px} .CompactorImage{width:400px;} .BillingOptionsDetails{position:relative; margin-left:200px; padding-top:20px;} .BillingOptionsIcon{float:left; display:block; position:relative;} .CharityClassContainer{height:275px;} .CharityClassTitle{ padding-bottom:10px; text-align:center;} .CharityClassesImageLeft{margin:0 auto; text-align: center; padding-bottom: 25px;} .CharityClassDescTextLeft{padding-right:12%; padding-left:12%;} .CharityClassesDescLeft{position:relative; } .CharityClassesImageRight{margin:0 auto; text-align: center; padding-bottom: 25px;} .CharityClassesDescRight{position:relative; } .CharityClassesDescRightContainer{position:relative; padding-left:12%; padding-right:12%;} .DonationItemLeft{width:100%; position:relative; clear:both; padding-top:20px;} .DonationItemRight{width:100%; position:relative; clear:both; padding-top:20px;} .DonationItemLeftContainer{position:relative; float:right; padding-right:0px;} .DonationItemRightContainer{position:relative; float:left; padding-right:0px;} } @media (min-width:801px) and (max-width:960px) /* tablet, landscape iPad, lo-res laptops ands desktops */ { /* FONT STYLES --------------------------------------------------------------*/ h1{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:52px; font-weight:800; margin:0} h2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:800; margin:0;} h3{font-family:'Roboto Slab',Georgia; font-size:48px; font-weight:400; margin:0;} h4{font-family:'Lato', Arial; font-size:19px; font-weight:700; margin:0;} h5{font-family:'Roboto Slab',Georgia; font-size:47px; font-weight:300; margin:0;} h6{font-family:'Roboto Slab',Georgia; font-size:40px; font-weight:300; margin:0;} .ArticleTitle {font-family:'Lato', Arial; font-size:2em; font-weight:700; margin:0;} .ArticleBody {font-family:'Lato', Arial; font-size:17px; font-weight:200; margin:0;} .ArticleBody1 {font-family:'Lato', Arial; font-size:15px; font-weight:300; margin:0;} .ArticleBody1 p {text-align:left;} .ArticleBody2 {font-family:'Lato', Arial; font-size:16px; font-weight:300; margin:0;} .ArticleBody1 a{color:#249555; text-decoration:none;} .ArticleBody1 a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} .Button1 {font-family:'Lato', Arial; font-size:17px; font-weight:400; margin:0;} .Button2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Nav1 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Nav2 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Nav3 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Nav4 {font-family:'Lato', Arial; font-size:11px; font-weight:700; margin:0;} .Nav5 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:13px; font-weight:600; margin:0;} .HamburgerNav{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Accent {font-family:'Roboto Slab',Georgia; font-size:12px; font-weight:300; margin:0;} /* --------------- ----------------------------------------------------------*/ .LinkHoverUnderline {text-decoration:none;} .LinkHoverUnderline:hover {text-decoration:underline;} /* LAYOUT FOR PAGE HEADERS - LOGO, MENU, HEADER BACKGROUND-------------------*/ /*#InclementWeatherAlert{display:none;}*/ .HamburgerMenu{ visibility:visible; position:relative; float:right; padding-top:20px; padding-right:15px;} /*FOR MOBILE*/ .MainBackgroundImage{ width:100%; position:relative; height:auto;} .BGimg{ background-image:url("images/wi logo - header.svg"); background-repeat:no-repeat; margin-left:5px; height:40px; width:280px; position:absolute; top:12px; left:0px;} .BGimgSmall{ background-image:url(Images/WI_LogoSmall.png); background-repeat:no-repeat; margin-left:50px; margin-top:30px; height:55px; width:440px;float:left; } .HeaderBackground{height:60px;background:rgba(255,255,255,0.7); top: 0; left:0; width:100%; position:fixed; z-index:100; border-bottom-color:Black; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgba(0, 0, 0, 0.0); } .HeaderBackgroundDark{height:100px;background:rgba(255,255,255,1); border-bottom:1px solid black;} .HeaderContainer{height:60px;position:relative; width:100%; } .HeaderMenu{float:right; padding-right:30px; height:65px; position:relative; display:none;} .HeaderMenuContent{position:relative; top:0px; } /* ---------------------------------------------------------------------------*/ .PhoneIcon{ display:none; background-image:url(images/general_icons_phone_icon.svg); background-repeat:no-repeat; width:30px; height:30px; float:right; margin-top:15px; padding-right:25px;} .PhoneIconWhite{ display:none; background-image:url(Images/General_Icons_Phone_Icon_White.svg); background-repeat:no-repeat; width:30px; height:30px; float:right; margin-top:15px; padding-right:25px;} /*.HeaderSubMenu {background-color:#58595b;}*/ .HeaderSubMenu {float:left; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; line-height:50px; color:White; width:100%} .HeaderSubMenu:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:50px; color:White;} .HeaderSubMenuLink:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink2 {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:50px; color:White;} .HeaderSubMenuLink2:hover{background-color:#ccc;color:Black; border-top-color:#0461b3;} #SubContentMenu {border-top:0px; position:absolute; width:100%; top:100px; display:none; height:50px;} #SubContentMenu2 {border-top:0px; position:absolute; width:100%; top:100px; display:none; height:50px;} /* HOME PAGE LOB LINKS - HOME, BUSINESS, LANDFILL, SPECIALTY ----------------*/ .LobItemsContainer {clear:left; width:100%; background-color:white; padding-bottom:0px; padding-top:35px; position:relative; overflow:hidden;font-family:Verdana;padding-top:0px; padding-bottom:0px; margin-bottom:0px; height:400px} .LobItemsContainer a { margin-top:30px} .LobItemContainer {float:left; width:25%; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black;padding-top:50px; padding-bottom:0px; position:relative; height:390px ; padding-left:0px;} .LobItemTitle { position:relative; left:0;text-align:center; padding-bottom:0px; color:inherit; padding-bottom:15px;} /*.LobItemTitle {position:relative; top:25%; text-align:center; text-decoration:none; color:black; font-weight:bold;background:white; height:70px; line-height:70px}*/ .LobItemIcon {float:none; text-align:center; margin:0 auto; display:block; clear:left; width:100px; height:100px;} .LobItemTypeDesc {margin-left:10%; margin-right:10%; color:black; margin-top:25px; display:block;} .LobItemContainer .LobSeperator {visibility:visible;} .LobItemContainer {float:left; width:25%; transition: background-color .5s; } .LobItemContainer:hover { background-color:#bbbdbf; color:White;} .LobItemContainer:hover .LobItemTypeDesc {visibility:hidden;} .LobItemContainer:hover .LobLinksContainer { display:block; z-index:3; } .LobItemContainer:hover .LobSeperator {visibility:hidden;} .LobLinksContainer {display:none; position:absolute; top:240px; height:165px; width:100%; transition: display 1s; } .HomePageLobLearnMore{display:block; width:100%; height:80px; line-height:80px; position:absolute; top:-30px; padding-top:0px; text-align:center; text-decoration:none;} .HomePageLobSignup{width:100%; height:80px; line-height:80px; position:absolute; top:50px; text-align:center;padding-top:0px; text-decoration:none;} .HomeLobTitleText2{display:inline;} #BusinessCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} #SpecialtyCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} #LandfillCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} .HomeCollectionIconImg{background: url('images/main_icons_home_collection.svg');width:100px; height:100px;} .BusinessCollectionIconImg{background: url('images/main_icons_business_collection.svg');width:100px; height:100px;} .SpecialtyCollectionIconImg{background: url('images/main_icons_specialty_collection.svg');width:100px; height:100px;} .LandfillCollectionIconImg{background: url('images/main_icons_landfill_collection.svg');width:100px; height:100px;} #HomeCollectionItem:hover .HomeCollectionIconImg{background: url('Images/Main_Icons_White_Home_Collection.svg');} #BusinessCollectionItem:hover .BusinessCollectionIconImg{background: url('Images/Main_Icons_White_Business_Collection.svg');} #SpecialtyCollectionItem:hover .SpecialtyCollectionIconImg{background: url('Images/Main_Icons_White_Specialty_Collection.svg');} #LandfillCollectionItem:hover .LandfillCollectionIconImg{background: url('Images/Main_Icons_White_Landfill_Collection.svg');} .LobLinkButton {transition: background-color .5s; color:White; background-color:inherit;} .LobLinkButton:hover { background-color:#32c96f;} .HomePageTabTextContainer{width:100%; float:left;} .HomePageTabImageContainer{display:none;} /* Primary Page Service Navs ------------------------------------------------ */ .ServicesContainer {clear:left; width :100%; overflow:hidden; height:250px;} .ServiceItem {float:left; width:25%;min-width:85px; height:250px; overflow:hidden; position:relative;} .ServiceItemMainContent {position:relative; height:250px; text-align:center; margin-left:-1px; background-color:#249655; position:relative; transition: background-color .5s;} .ServiceItemMainContent:hover {background-color:#32c96f;} .PrimaryCollectionNav{display:none; margin-top:2px; height:150px;} .ServiceItemDivider{background-color:white; height:160px; width:2px; float:left; margin-top:45px;} .ServiceItemTitle{color:White; padding-top:40px;} .ServiceItemMainContent:hover .PrimaryCollectionNav { display:block; z-index:3; } .ServiceItemMainContent:hover .icon {display:none;} .ServiceItemIcon{padding-top:20px;} #ResidentialWasteCollectionIcon{background: url('/Images/Home_Collection_Service_Icons_Waste_Collection.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialWasteCollectionIcon{margin:0 auto;} #ResidentialRecyclingIcon{background: url('/images/home_collection_service_icons_recycling.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialRecyclingIcon{margin:0 auto;} #ResidentialYardWasteIcon{background: url('/Images/Home_Collection_Service_Icons_Yard Waste.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialYardWasteIcon{margin:0 auto;} #ResidentialHomeRenovationsIcon{background: url('/images/home_collection_service_icons_dumpster_rental.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialHomeRenovationsIcon{margin:0 auto;} #CommercialDumpsterRentalIcon{background: url('/Images/Business_Collection_Service_Icons_Dumpster_Rental.svg');width:125px; height:125px; background-repeat:no-repeat} .CommercialDumpsterRentalIcon{margin:0 auto;} #CommercialRecyclingIcon{background: url('/Images/Business_Collection_Service_Icons_Recycling.svg');width:125px; height:125px; background-repeat:no-repeat} .CommercialRecyclingIcon{margin:0 auto;} #CommercialRollOffIcon{background: url('/Images/Business_Collection_Service_Icons_Roll-Off.svg');width:125px; height:125px; background-repeat:no-repeat} .CommercialRollOffIcon{margin:0 auto;} #CommercialCompactorsIcon{background: url('/Images/Business_Collection_Service_Icons_Compactors.svg');width:125px; height:125px; background-repeat:no-repeat} .CommercialCompactorsIcon{margin:0 auto;} #SpecialtyBrokerRelationsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Broker_Relations.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyBrokerRelationsIcon{margin:0 auto;} #SpecialtyCorporateAccountsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Corporate_Accounts.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyCorporateAccountsIcon{margin:0 auto;} #SpecialtyMunicipalContractsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Municipalities.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyMunicipalContractsIcon{margin:0 auto;} #SpecialtyHoaIcon{background: url('/Images/Specialty_Collection_Service_Icons_HOA_Services.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyHoaIcon{margin:0 auto;} .ResidentialLearnMore{display:block; width:100%; height:75px; line-height:75px; position:relative; padding-top:0px; text-align:center; text-decoration:none;} .ResidentialSignUp{display:block; width:100%; height:75px; line-height:75px; position:relative; text-align:center;padding-top:0px; text-decoration:none;} .ServiceButton {transition: background-color .5s; color:White; } .ServiceButton:hover { background-color:white; color:Black;} /*-----------------------------------------------------------------------------/ /*GREEN BUTTON WITH ROUNDED CORNERS----------------------------------------------------------------------------*/ .linkButton { background-color:#249555; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ transition: background-color .5s; } .linkButton:hover{ background-color:#32c96f;} /* GREEN BUTTON IN HERO IMAGE BACKGROUND-----------------------------------------------------*/ .HeroButton { background-color:#249555; transition: background-color .5s; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ text-align:center; display:inline; height:60px; color:white; line-height:60px; margin-right:10px; padding:10px 30px 10px 30px; } .HeroButton:hover { background-color:#32c96f;} /* TABS IN COLLECTION PAGES ---------------------------------------------------------------------*/ .HeroLinkContainer{width:100%; height:50px; position:absolute; bottom:-10px; z-index:5;} .HeroLinkTab{width:25%; float:left;} .HeroLinkSelected{text-align:center; height:40px; line-height:40px; background-color:White; margin-left:20px; margin-right:20px; color:black; } .HeroLink {display:block; text-decoration:none; text-align:center; height:40px; line-height:40px; margin-left:20px; margin-right:20px; color:white;} .HeroLink:hover { border-color:rgba(204, 204, 204, .7); border-style:solid; border-width:2px; border-bottom-width:0px; height:40px; line-height:37px;background:rgba(204, 204, 204, .3)} /* HERO CONTENT ----------------------------------------------------------------------------------*/ .HeroIcon{color:white; width:100%; text-align:center; position:absolute; top:200px;} .HeroTitle {color:white; width:100%; text-align:center;} .HeroImageHomeCollection{background-image:url(Images/HomeCollectionMain.jpg);width:100%; height:500px; background-size:cover;} .HeroImageBusinessCollection{background-image:url(Images/HeroBusinessCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroImageLandfill{background-image:url(Images/WI2012_landfillP-0004v2.jpg);width:100%; height:500px; background-size:cover;} .HeroImageSpecialtyCollection{background-image:url(Images/HeroSpecialtyCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroFilter{background:rgba(0,0,0,0.4); position:absolute; width:100%; height:100%;z-index:1; top:0;} .SubHeroContainer {height:60px; position:relative; margin-top:0px;} .SubPageHeroTitle{color:white; width:100%; text-align:center;position:absolute; margin:0 auto; top:40%; clear:both;} .ServicesNavArrowContainer{position:absolute; width:100%;margin:0 auto; top:50%; z-index:4;} .HeroPageNavText{display:none;} .ArrowNavLeft {transition:font-size .2s, margin-left .2s; background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; margin-left:30px; width:200px; height:63px; display:block;float:left; text-align:left; color:White;padding-left:70px; padding-top:4px; text-decoration:none; } .ArrowNavRight { transition:font-size .2s, margin-right .2s; background-image:url(images/general_icons_right_arrow.svg); background-position:right; margin-right:30px; width:220px; background-repeat:no-repeat; height:63px; display:block; float:right; text-align:left; color:White;padding-left:50px; padding-top:4px; text-decoration:none; } .ArrowNavLeft:hover{margin-left:15px;} .ArrowNavRight:hover{margin-right:15px;} .HeroPageNavLeft {transition:font-size .2s, margin-left .2s; display:block;float:left; margin-left:30px; text-decoration:none; } .HeroPageNavRight { transition:font-size .2s, margin-right .2s; display:block;float:right; margin-right:30px; text-decoration:none; } .HeroPageNavLeft:hover{margin-left:15px;} .HeroPageNavRight:hover{margin-right:15px;} .HeroPageNavRightArrow {float:right; color:White; background-image:url(images/general_icons_right_arrow.svg);background-repeat:no-repeat; height:60px; width:50px; vertical-align:middle; margin-top:-5px;} .HeroPageNavLeftArrow {display:inline-block; float:left; color:White; position:relative;background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; height:60px; width:50px; vertical-align:middle; margin-top:-5px;} /*SUB PAGE LINK NAVIGATION -----------------------------------------------------------------------*/ .subNavContainer {color:#249555; padding-top:30px; clear:left;} .subNavContainer a{color:#249555; text-decoration:none;} .subNavContainer a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} /*-------------------------------------------------------------------------------------------------*/ .newsButton {height:60px; width:90px; color:#249555; text-align:center; line-height:60px; margin-top:10px; margin-right:10px; z-index:100; text-decoration:none;} .newsButton:hover{color:#32c96f; text-decoration:underline;} article{margin-left:10%; margin-right:10%; } .PageLinkContainer {clear:left; width :100%; overflow:hidden;} .PageLinkContainer .PageLink {background-color:#a6a8ab;} .PageLink { float:left; width:25%; height:90px; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; color:black; line-height:90px;} .PageLink.active{background-color:White;} .SubPageMenuSeperatorLine {margin-left:20%; margin-right:20%; margin-top:40px; height:1px; background-color:silver;} #CustomerSatisfactionSurveyLinkText1{display:none;} /*Seconday Links ---------------------------------------------------*/ .SecondaryServicesContainer {clear:left; width:100%; position:relative; overflow:hidden;padding-top:3px; padding-bottom:0px; margin-bottom:0px; height:300px; } .SecondaryServiceItem {background-color:#e5e6e7; height:300px;transition: background-color .5s;} .SecondaryServiceItem:hover {background-color:#ccc;} .SecondaryServiceItemHeaderText{color:black; padding-top:100px;text-align:center; padding-bottom:15px;} .SecondaryServiceItemDivider {background-color:Black; height:190px; width:1px; float:right; margin-top:50px} .SecondaryLinksText {display:block;} /*------------------------------------------------------------------*/ .FooterImagesContainer{float:left; width:20%;} .FooterWiLogo{height:85px; padding-left:4px;} .FooterErefLogo{clear:both; padding-top:20px; height:85px;} .FooterSocialIconsContainer{float:left;width:20%;padding-bottom:10px;} .FooterCompanyLinksContainer{float:left;width:20%;} .FooterConnectLinksContainer{float:left;width:20%;} .FooterServicesLinksContainer{float:left;width:20%;} .FileNotFoundImage {z-index:50;background-image: url('/Images/404_Visual.svg'); background-repeat:no-repeat; width:500px; height:500px; position:relative; margin:0 auto; margin-top:50px;} .DumpsterImage{width:450px} .CompactorImage{width:600px;} .BillingOptionsDetails{position:relative; margin-left:200px; padding-top:20px;} .BillingOptionsIcon{float:left; display:block; position:relative;} .CharityClassContainer{height:250px;} .CharityClassTitle{padding-top:70px; padding-bottom:10px;} .CharityClassesImageLeft{position:relative; float:left; width:25%;} .CharityClassDescTextLeft{padding-right:12%;} .CharityClassesDescLeft{position:relative; float:left; width:75%;} .CharityClassesImageRight{position:relative; float:right; width:25%;} .CharityClassesDescRight{position:relative; float:right; width:75%;} .CharityClassesDescRightContainer{position:relative; float:right; padding-left:12%;} .DonationItemLeft{width:50%; position:relative; float:left;} .DonationItemRight{width:50%; position:relative; float:right;} .DonationItemLeftContainer{position:relative; float:right; padding-right:50px;} .DonationItemRightContainer{position:relative; float:left; padding-right:50px;} } @media (min-width:961px) and (max-width:1099px) /* tablet, landscape iPad, lo-res laptops ands desktops */ { /* FONT STYLES --------------------------------------------------------------*/ h1{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:56px; font-weight:800; margin:0} h2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:24px; font-weight:800; margin:0;} h3{font-family:'Roboto Slab',Georgia; font-size:64px; font-weight:400; margin:0;} h4{font-family:'Lato', Arial; font-size:22px; font-weight:700; margin:0;} h5{font-family:'Roboto Slab',Georgia; font-size:64px; font-weight:300; margin:0;} h6{font-family:'Roboto Slab',Georgia; font-size:48px; font-weight:300; margin:0;} .ArticleTitle {font-family:'Lato', Arial; font-size:2em; font-weight:700; margin:0;} .ArticleBody {font-family:'Lato', Arial; font-size:17px; font-weight:200; margin:0;} .ArticleBody1 {font-family:'Lato', Arial; font-size:16px; font-weight:300; margin:0;} .ArticleBody1 p {text-align:left;} .ArticleBody2 {font-family:'Lato', Arial; font-size:16px; font-weight:300; margin:0;} .ArticleBody1 a{color:#249555; text-decoration:none;} .ArticleBody1 a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} .Button1 {font-family:'Lato', Arial; font-size:19px; font-weight:400; margin:0;} .Button2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:19px; font-weight:400; margin:0;} .Nav1 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:20px; font-weight:400; margin:0;} .Nav2 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:19px; font-weight:400; margin:0;} .Nav3 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:19px; font-weight:400; margin:0;} .Nav4 {font-family:'Lato', Arial; font-size:16px; font-weight:700; margin:0;} .Nav5 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:600; margin:0;} .Nav6 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .HamburgerNav{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Accent {font-family:'Roboto Slab',Georgia; font-size:13px; font-weight:300; margin:0;} /* --------------- ----------------------------------------------------------*/ .LinkHoverUnderline {text-decoration:none;} .LinkHoverUnderline:hover {text-decoration:underline;} /* LAYOUT FOR PAGE HEADERS - LOGO, MENU, HEADER BACKGROUND-------------------*/ /*#InclementWeatherAlert{display:none;}*/ .HamburgerMenu{ visibility:hidden;} /*FOR MOBILE*/ .MainBackgroundImage{ width:100%; position:relative; height:auto;} .BGimg{ background-image:url("images/wi logo - header.svg"); background-repeat:no-repeat; margin-left:5px; height:40px; width:280px; position:absolute; top:22px; left:0px;} .BGimgSmall{ background-image:url(Images/WI_LogoSmall.png); background-repeat:no-repeat; margin-left:5px; margin-top:30px; height:55px; width:440px;float:left; } .HeaderBackground{height:70px;background:rgba(255,255,255,0.7); top: 0; left:0; width:100%; position:fixed; z-index:100; border-bottom-color:Black; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgba(0, 0, 0, 0.0); } .HeaderBackgroundDark{height:100px;background:rgba(255,255,255,1); border-bottom:1px solid black;} .HeaderContainer{height:70px;position:relative; width:100%; } .HeaderMenu{float:right; padding-right:30px; height:40px; position:relative;} .HeaderMenuContent{position:relative; top:-5px; } /* ---------------------------------------------------------------------------*/ /*.HeaderSubMenu {background-color:#58595b;}*/ .HeaderSubMenu {float:left; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; line-height:40px; color:White; width:100%} .HeaderSubMenu:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:40px; color:White;} .HeaderSubMenuLink:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink2 {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:40px; color:White;} .HeaderSubMenuLink2:hover{background-color:#ccc;color:Black; border-top-color:#0461b3;} #SubContentMenu {border-top:0px; position:absolute; width:100%; top:70px; height:40px;} #SubContentMenu2 {border-top:0px; position:absolute; width:100%; top:70px; height:40px;} /* HOME PAGE LOB LINKS - HOME, BUSINESS, LANDFILL, SPECIALTY ----------------*/ .LobItemsContainer {clear:left; width:100%; background-color:white; padding-bottom:0px; padding-top:35px; position:relative; overflow:hidden;font-family:Verdana;padding-top:0px; padding-bottom:0px; margin-bottom:0px; height:405px} .LobItemsContainer a { margin-top:30px} .LobItemContainer {float:left; width:25%; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black;padding-top:50px; padding-bottom:0px; position:relative; height:390px ; padding-left:0px;} .LobItemTitle { position:relative; left:0;text-align:center; padding-bottom:0px; color:inherit; padding-bottom:15px;} /*.LobItemTitle {position:relative; top:25%; text-align:center; text-decoration:none; color:black; font-weight:bold;background:white; height:70px; line-height:70px}*/ .LobItemIcon {float:none; text-align:center; margin:0 auto; display:block; clear:left; width:100px; height:100px;} .LobItemTypeDesc {margin-left:10%; margin-right:10%; color:black; margin-top:25px; display:block;} .LobItemContainer .LobSeperator {visibility:visible;} .LobItemContainer {float:left; width:25%; transition: background-color .5s; } .LobItemContainer:hover { background-color:#bbbdbf; color:White;} .LobItemContainer:hover .LobItemTypeDesc {visibility:hidden;} .LobItemContainer:hover .LobLinksContainer { display:block; z-index:3; } .LobItemContainer:hover .LobSeperator {visibility:hidden;} .LobLinksContainer {display:none; position:absolute; top:245px; height:165px; width:100%; transition: display 1s; } .HomePageLobLearnMore{display:block; width:100%; height:80px; line-height:80px; position:absolute; top:-30px; padding-top:0px; text-align:center; text-decoration:none;} .HomePageLobSignup{width:100%; height:80px; line-height:80px; position:absolute; top:50px; text-align:center;padding-top:0px; text-decoration:none;} .HomeLobTitleText2{display:inline;} #BusinessCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} #SpecialtyCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} #LandfillCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} .HomeCollectionIconImg{background: url('images/main_icons_home_collection.svg');width:100px; height:100px;} .BusinessCollectionIconImg{background: url('images/main_icons_business_collection.svg');width:100px; height:100px;} .SpecialtyCollectionIconImg{background: url('images/main_icons_specialty_collection.svg');width:100px; height:100px;} .LandfillCollectionIconImg{background: url('images/main_icons_landfill_collection.svg');width:100px; height:100px;} #HomeCollectionItem:hover .HomeCollectionIconImg{background: url('Images/Main_Icons_White_Home_Collection.svg');} #BusinessCollectionItem:hover .BusinessCollectionIconImg{background: url('Images/Main_Icons_White_Business_Collection.svg');} #SpecialtyCollectionItem:hover .SpecialtyCollectionIconImg{background: url('Images/Main_Icons_White_Specialty_Collection.svg');} #LandfillCollectionItem:hover .LandfillCollectionIconImg{background: url('Images/Main_Icons_White_Landfill_Collection.svg');} .LobLinkButton {transition: background-color .5s; color:White; background-color:inherit;} .LobLinkButton:hover { background-color:#32c96f;} .HomePageTabTextContainer{width:100%; float:left;} .HomePageTabImageContainer{display:none;} /* Primary Page Service Navs ------------------------------------------------ */ .ServicesContainer {clear:left; width :100%; overflow:hidden; height:250px;} .ServiceItem {float:left; width:25%;min-width:85px; height:250px; overflow:hidden; position:relative;} .ServiceItemMainContent {position:relative; height:250px; text-align:center; margin-left:-1px; background-color:#249655; position:relative; transition: background-color .5s;} .ServiceItemMainContent:hover {background-color:#32c96f;} .PrimaryCollectionNav{display:none; margin-top:2px; height:150px;} .ServiceItemDivider{background-color:white; height:160px; width:2px; float:left; margin-top:45px;} .ServiceItemTitle{color:White; padding-top:40px;} .ServiceItemMainContent:hover .PrimaryCollectionNav { display:block; z-index:3; } .ServiceItemMainContent:hover .icon {display:none;} .ServiceItemIcon{padding-top:20px;} #ResidentialWasteCollectionIcon{background: url('/Images/Home_Collection_Service_Icons_Waste_Collection.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialWasteCollectionIcon{margin:0 auto;} #ResidentialRecyclingIcon{background: url('/images/home_collection_service_icons_recycling.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialRecyclingIcon{margin:0 auto;} #ResidentialYardWasteIcon{background: url('/Images/Home_Collection_Service_Icons_Yard Waste.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialYardWasteIcon{margin:0 auto;} #ResidentialHomeRenovationsIcon{background: url('/images/home_collection_service_icons_dumpster_rental.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialHomeRenovationsIcon{margin:0 auto;} #CommercialDumpsterRentalIcon{background: url('/Images/Business_Collection_Service_Icons_Dumpster_Rental.svg');width:200px; height:200px; background-repeat:no-repeat} .CommercialDumpsterRentalIcon{margin:0 auto;} #CommercialRecyclingIcon{background: url('/Images/Business_Collection_Service_Icons_Recycling.svg');width:200px; height:200px; background-repeat:no-repeat} .CommercialRecyclingIcon{margin:0 auto;} #CommercialRollOffIcon{background: url('/Images/Business_Collection_Service_Icons_Roll-Off.svg');width:200px; height:200px; background-repeat:no-repeat} .CommercialRollOffIcon{margin:0 auto;} #CommercialCompactorsIcon{background: url('/Images/Business_Collection_Service_Icons_Compactors.svg');width:200px; height:200px; background-repeat:no-repeat} .CommercialCompactorsIcon{margin:0 auto;} #SpecialtyBrokerRelationsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Broker_Relations.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyBrokerRelationsIcon{margin:0 auto;} #SpecialtyCorporateAccountsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Corporate_Accounts.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyCorporateAccountsIcon{margin:0 auto;} #SpecialtyMunicipalContractsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Municipalities.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyMunicipalContractsIcon{margin:0 auto;} #SpecialtyHoaIcon{background: url('/Images/Specialty_Collection_Service_Icons_HOA_Services.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyHoaIcon{margin:0 auto;} .ResidentialLearnMore{display:block; width:100%; height:75px; line-height:75px; position:relative; padding-top:0px; text-align:center; text-decoration:none;} .ResidentialSignUp{display:block; width:100%; height:75px; line-height:75px; position:relative; text-align:center;padding-top:0px; text-decoration:none;} .ServiceButton {transition: background-color .5s; color:White; } .ServiceButton:hover { background-color:white; color:Black;} /*-----------------------------------------------------------------------------/ /*GREEN BUTTON WITH ROUNDED CORNERS----------------------------------------------------------------------------*/ .linkButton { background-color:#249555; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ transition: background-color .5s; } .linkButton:hover{ background-color:#32c96f;} /* GREEN BUTTON IN HERO IMAGE BACKGROUND-----------------------------------------------------*/ .HeroButton { background-color:#249555; transition: background-color .5s; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ text-align:center; display:inline; height:60px; color:white; line-height:60px; margin-right:10px; padding:10px 30px 10px 30px; } .HeroButton:hover { background-color:#32c96f;} /* TABS IN COLLECTION PAGES ---------------------------------------------------------------------*/ .HeroLinkContainer{width:100%; height:70px; position:absolute; bottom:-10px; z-index:5;} .HeroLinkTab{width:25%; float:left;} .HeroLinkSelected{text-align:center; height:70px; line-height:70px; background-color:White; margin-left:20px; margin-right:20px; color:black; } .HeroLink {display:block; text-decoration:none; text-align:center; height:50px; line-height:60px; margin-left:20px; margin-right:20px; color:white;} .HeroLink:hover { border-color:rgba(204, 204, 204, .7); border-style:solid; border-width:2px; border-bottom-width:0px; height:60px; line-height:56px;background:rgba(204, 204, 204, .3)} /* HERO CONTENT ----------------------------------------------------------------------------------*/ .HeroIcon{color:white; width:100%; text-align:center; position:absolute; top:200px;} .HeroTitle {color:white; width:100%; text-align:center;} .HeroImageHomeCollection{background-image:url(Images/HomeCollectionMain.jpg);width:100%; height:500px; background-size:cover;} .HeroImageBusinessCollection{background-image:url(Images/HeroBusinessCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroImageLandfill{background-image:url(Images/WI2012_landfillP-0004v2.jpg);width:100%; height:500px; background-size:cover;} .HeroImageSpecialtyCollection{background-image:url(Images/HeroSpecialtyCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroFilter{background:rgba(0,0,0,0.4); position:absolute; width:100%; height:100%;z-index:1; top:0;} .SubHeroContainer {height:60px; position:relative; margin-top:0px;} .SubPageHeroTitle{color:white; width:100%; text-align:center;position:absolute; margin:0 auto; top:40%; clear:both;} .ServicesNavArrowContainer{position:absolute; width:100%;margin:0 auto; top:50%; z-index:4;} .HeroPageNavText{display:none;} .ArrowNavLeft {transition:font-size .2s, margin-left .2s; background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; margin-left:30px; width:200px; height:63px; display:block;float:left; text-align:left; color:White;padding-left:70px; padding-top:4px; text-decoration:none; } .ArrowNavRight { transition:font-size .2s, margin-right .2s; background-image:url(images/general_icons_right_arrow.svg); background-position:right; margin-right:30px; width:220px; background-repeat:no-repeat; height:63px; display:block; float:right; text-align:left; color:White;padding-left:50px; padding-top:4px; text-decoration:none; } .ArrowNavLeft:hover{margin-left:15px;} .ArrowNavRight:hover{margin-right:15px;} .HeroPageNavLeft {transition:font-size .2s, margin-left .2s; display:block;float:left; margin-left:30px; text-decoration:none; } .HeroPageNavRight { transition:font-size .2s, margin-right .2s; display:block;float:right; margin-right:30px; text-decoration:none; } .HeroPageNavLeft:hover{margin-left:15px;} .HeroPageNavRight:hover{margin-right:15px;} .HeroPageNavRightArrow {float:right; color:White; background-image:url(images/general_icons_right_arrow.svg);background-repeat:no-repeat; height:60px; width:50px; vertical-align:middle; margin-top:-5px;} .HeroPageNavLeftArrow {display:inline-block; float:left; color:White; position:relative;background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; height:60px; width:50px; vertical-align:middle; margin-top:-5px;} /*SUB PAGE LINK NAVIGATION -----------------------------------------------------------------------*/ .subNavContainer {color:#249555; padding-top:30px; clear:left;} .subNavContainer a{color:#249555; text-decoration:none;} .subNavContainer a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} /*-------------------------------------------------------------------------------------------------*/ .newsButton {height:60px; width:90px; color:#249555; text-align:center; line-height:60px; margin-top:10px; margin-right:10px; z-index:100; text-decoration:none;} .newsButton:hover{color:#32c96f; text-decoration:underline;} article{margin-left:10%; margin-right:10%; } .PageLinkContainer {clear:left; width :100%; overflow:hidden;} .PageLinkContainer .PageLink {background-color:#a6a8ab;} .PageLink { float:left; width:25%; height:90px; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; color:black; line-height:90px;} .PageLink.active{background-color:White;} .SubPageMenuSeperatorLine {margin-left:20%; margin-right:20%; margin-top:40px; height:1px; background-color:silver;} /*Seconday Links ---------------------------------------------------*/ .SecondaryServicesContainer {clear:left; width:100%; position:relative; overflow:hidden;padding-top:3px; padding-bottom:0px; margin-bottom:0px; height:320px; } .SecondaryServiceItem {background-color:#e5e6e7; height:320px;transition: background-color .5s;} .SecondaryServiceItem:hover {background-color:#ccc;} .SecondaryServiceItemHeaderText{color:black; padding-top:100px;text-align:center; padding-bottom:15px;} .SecondaryServiceItemDivider {background-color:Black; height:210px; width:1px; float:right; margin-top:50px} .SecondaryLinksText {display:block;} /*------------------------------------------------------------------*/ .FooterImagesContainer{float:left; width:20%;} .FooterWiLogo{height:85px; padding-left:4px;} .FooterErefLogo{clear:both; padding-top:20px; height:85px;} .FooterSocialIconsContainer{float:left;width:20%;padding-bottom:10px;} .FooterCompanyLinksContainer{float:left;width:20%;} .FooterConnectLinksContainer{float:left;width:20%;} .FooterServicesLinksContainer{float:left;width:20%;} .FileNotFoundImage {z-index:50;background-image: url('/Images/404_Visual.svg'); background-repeat:no-repeat; width:500px; height:500px; position:relative; margin:0 auto; margin-top:50px;} .DumpsterImage{width:450px} .CompactorImage{width:600px;} .BillingOptionsDetails{position:relative; margin-left:200px; padding-top:20px;} .BillingOptionsIcon{float:left; display:block; position:relative;} .CharityClassContainer{height:250px;} .CharityClassTitle{padding-top:70px; padding-bottom:10px;} .CharityClassesImageLeft{position:relative; float:left; width:25%;} .CharityClassDescTextLeft{padding-right:12%;} .CharityClassesDescLeft{position:relative; float:left; width:75%;} .CharityClassesImageRight{position:relative; float:right; width:25%;} .CharityClassesDescRight{position:relative; float:right; width:75%;} .CharityClassesDescRightContainer{position:relative; float:right; padding-left:12%;} .DonationItemLeft{width:50%; position:relative; float:left;} .DonationItemRight{width:50%; position:relative; float:right;} .DonationItemLeftContainer{position:relative; float:right; padding-right:50px;} .DonationItemRightContainer{position:relative; float:left; padding-right:50px;} } @media (min-width:1100px) and (max-width:1349px) /* big landscape tablets, laptops, and desktops */ { /* FONT STYLES --------------------------------------------------------------*/ h1{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:64px; font-weight:800; margin:0} h2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:28px; font-weight:800; margin:0;} h3{font-family:'Roboto Slab',Georgia; font-size:64px; font-weight:400; margin:0;} h4{font-family:'Lato', Arial; font-size:24px; font-weight:700; margin:0;} h5{font-family:'Roboto Slab',Georgia; font-size:64px; font-weight:300; margin:0;} h6{font-family:'Roboto Slab',Georgia; font-size:48px; font-weight:300; margin:0;} .ArticleTitle {font-family:'Lato', Arial; font-size:2em; font-weight:700; margin:0;} .ArticleBody {font-family:'Lato', Arial; font-size:17px; font-weight:200; margin:0;} .ArticleBody1 {font-family:'Lato', Arial; font-size:19px; font-weight:300; margin:0;} .ArticleBody1 p {text-align:left;} .ArticleBody2 {font-family:'Lato', Arial; font-size:16px; font-weight:300; margin:0;} .ArticleBody1 a{color:#249555; text-decoration:none;} .ArticleBody1 a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} .Button1 {font-family:'Lato', Arial; font-size:21px; font-weight:400; margin:0;} .Button2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:22px; font-weight:400; margin:0;} .Nav1 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:24px; font-weight:400; margin:0;} .Nav2 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:21px; font-weight:400; margin:0;} .Nav3 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:19px; font-weight:400; margin:0;} .Nav4 {font-family:'Lato', Arial; font-size:24px; font-weight:700; margin:0;} .Nav5 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:600; margin:0;} .Nav6 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .HamburgerNav{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Accent {font-family:'Roboto Slab',Georgia; font-size:16px; font-weight:300; margin:0;} /* --------------- ----------------------------------------------------------*/ .LinkHoverUnderline {text-decoration:none;} .LinkHoverUnderline:hover {text-decoration:underline;} /* LAYOUT FOR PAGE HEADERS - LOGO, MENU, HEADER BACKGROUND-------------------*/ /*#InclementWeatherAlert{display:none;}*/ .HamburgerMenu{ visibility:hidden;} /*FOR MOBILE*/ .MainBackgroundImage{ width:100%; position:relative; height:auto;} .BGimg{ background-image:url("images/wi logo - header.svg"); background-repeat:no-repeat; margin-left:12px; height:50px; width:350px; position:absolute; top:17px; left:0px;} .BGimgSmall{ background-image:url(Images/WI_LogoSmall.png); background-repeat:no-repeat; margin-left:50px; margin-top:30px; height:55px; width:440px;float:left; } .HeaderBackground{height:70px;background:rgba(255,255,255,0.7); top: 0; left:0; width:100%; position:fixed; z-index:100; border-bottom-color:Black; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgba(0, 0, 0, 0.0); } .HeaderBackgroundDark{height:100px;background:rgba(255,255,255,1); border-bottom:1px solid black;} .HeaderContainer{height:70px;position:relative; width:100%;} .HeaderMenu{float:right; padding-right:30px; height:40px; position:relative;} .HeaderMenuContent{position:relative; top:-5px; } /* ---------------------------------------------------------------------------*/ /*.HeaderSubMenu {background-color:#58595b;}*/ .HeaderSubMenu {float:left; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; line-height:40px; color:White; width:100%} .HeaderSubMenu:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:40px; color:White;} .HeaderSubMenuLink:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink2 {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:40px; color:White;} .HeaderSubMenuLink2:hover{background-color:#ccc;color:Black; border-top-color:#0461b3;} #SubContentMenu {border-top:0px; position:absolute; width:100%; top:70px; height:40px;} #SubContentMenu2 {border-top:0px; position:absolute; width:100%; top:70px; height:40px;} /* HOME PAGE LOB LINKS - HOME, BUSINESS, LANDFILL, SPECIALTY ----------------*/ .LobItemsContainer {clear:left; width:100%; background-color:white; padding-bottom:0px; padding-top:35px; position:relative; overflow:hidden;font-family:Verdana;padding-top:0px; padding-bottom:0px; margin-bottom:0px; height:440px} .LobItemsContainer a { margin-top:30px} .LobItemContainer {float:left; width:25%; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black;padding-top:50px; padding-bottom:0px; position:relative; height:390px ; padding-left:0px;} .LobItemTitle { position:relative; left:0;text-align:center; padding-bottom:0px; color:inherit; padding-bottom:15px;} /*.LobItemTitle {position:relative; top:25%; text-align:center; text-decoration:none; color:black; font-weight:bold;background:white; height:70px; line-height:70px}*/ .LobItemIcon {float:none; text-align:center; margin:0 auto; display:block; clear:left; width:120px; height:120px;} .LobItemTypeDesc {margin-left:10%; margin-right:10%; color:black; margin-top:25px; display:block;} .LobItemContainer .LobSeperator {visibility:visible;} .LobItemContainer {float:left; width:25%; transition: background-color .5s; } .LobItemContainer:hover { background-color:#bbbdbf; color:White;} .LobItemContainer:hover .LobItemTypeDesc {visibility:hidden;} .LobItemContainer:hover .LobLinksContainer { display:block; z-index:3; } .LobItemContainer:hover .LobSeperator {visibility:hidden;} .LobLinksContainer {display:none; position:absolute; top:280px; height:165px; width:100%; transition: display 1s;} .HomePageLobLearnMore{display:block; width:100%; height:80px; line-height:80px; position:absolute; top:-30px; padding-top:0px; text-align:center; text-decoration:none;} .HomePageLobSignup{width:100%; height:80px; line-height:80px; position:absolute; top:50px; text-align:center;padding-top:0px; text-decoration:none;} .HomeLobTitleText2{display:inline;} #BusinessCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} #SpecialtyCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} #LandfillCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} .HomeCollectionIconImg{background: url('images/main_icons_home_collection.svg');width:120px; height:120px;} .BusinessCollectionIconImg{background: url('images/main_icons_business_collection.svg');width:120px; height:120px;} .SpecialtyCollectionIconImg{background: url('images/main_icons_specialty_collection.svg');width:120px; height:120px;} .LandfillCollectionIconImg{background: url('images/main_icons_landfill_collection.svg');width:120px; height:120px;} #HomeCollectionItem:hover .HomeCollectionIconImg{background: url('Images/Main_Icons_White_Home_Collection.svg');} #BusinessCollectionItem:hover .BusinessCollectionIconImg{background: url('Images/Main_Icons_White_Business_Collection.svg');} #SpecialtyCollectionItem:hover .SpecialtyCollectionIconImg{background: url('Images/Main_Icons_White_Specialty_Collection.svg');} #LandfillCollectionItem:hover .LandfillCollectionIconImg{background: url('Images/Main_Icons_White_Landfill_Collection.svg');} .LobLinkButton {transition: background-color .5s; color:White; background-color:inherit;} .LobLinkButton:hover { background-color:#32c96f;} .HomePageTabTextContainer{width:70%; float:left;} .HomePageTabImageContainer{width:30%; float:left; text-align:center;} /* Primary Page Service Navs ------------------------------------------------ */ .ServicesContainer {clear:left; width :100%; overflow:hidden; height:250px;} .ServiceItem {float:left; width:25%;min-width:85px; height:250px; overflow:hidden; position:relative;} .ServiceItemMainContent {position:relative; height:250px; text-align:center; margin-left:-1px; background-color:#249655; position:relative; transition: background-color .5s;} .ServiceItemMainContent:hover {background-color:#32c96f;} .PrimaryCollectionNav{display:none; margin-top:2px; height:150px;} .ServiceItemDivider{background-color:white; height:160px; width:2px; float:left; margin-top:45px;} .ServiceItemTitle{color:White; padding-top:40px;} .ServiceItemMainContent:hover .PrimaryCollectionNav { display:block; z-index:3; } .ServiceItemMainContent:hover .icon {display:none;} .ServiceItemIcon{padding-top:20px;} #ResidentialWasteCollectionIcon{background: url('/Images/Home_Collection_Service_Icons_Waste_Collection.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialWasteCollectionIcon{margin:0 auto;} #ResidentialRecyclingIcon{background: url('/images/home_collection_service_icons_recycling.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialRecyclingIcon{margin:0 auto;} #ResidentialYardWasteIcon{background: url('/Images/Home_Collection_Service_Icons_Yard Waste.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialYardWasteIcon{margin:0 auto;} #ResidentialHomeRenovationsIcon{background: url('/images/home_collection_service_icons_dumpster_rental.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialHomeRenovationsIcon{margin:0 auto;} #CommercialDumpsterRentalIcon{background: url('/Images/Business_Collection_Service_Icons_Dumpster_Rental.svg');width:200px; height:200px; background-repeat:no-repeat} .CommercialDumpsterRentalIcon{margin:0 auto;} #CommercialRecyclingIcon{background: url('/Images/Business_Collection_Service_Icons_Recycling.svg');width:200px; height:200px; background-repeat:no-repeat} .CommercialRecyclingIcon{margin:0 auto;} #CommercialRollOffIcon{background: url('/Images/Business_Collection_Service_Icons_Roll-Off.svg');width:200px; height:200px; background-repeat:no-repeat} .CommercialRollOffIcon{margin:0 auto;} #CommercialCompactorsIcon{background: url('/Images/Business_Collection_Service_Icons_Compactors.svg');width:200px; height:200px; background-repeat:no-repeat} .CommercialCompactorsIcon{margin:0 auto;} #SpecialtyBrokerRelationsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Broker_Relations.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyBrokerRelationsIcon{margin:0 auto;} #SpecialtyCorporateAccountsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Corporate_Accounts.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyCorporateAccountsIcon{margin:0 auto;} #SpecialtyMunicipalContractsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Municipalities.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyMunicipalContractsIcon{margin:0 auto;} #SpecialtyHoaIcon{background: url('/Images/Specialty_Collection_Service_Icons_HOA_Services.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyHoaIcon{margin:0 auto;} .ResidentialLearnMore{display:block; width:100%; height:75px; line-height:75px; position:relative; padding-top:0px; text-align:center; text-decoration:none;} .ResidentialSignUp{display:block; width:100%; height:75px; line-height:75px; position:relative; text-align:center;padding-top:0px; text-decoration:none;} .ServiceButton {transition: background-color .5s; color:White; } .ServiceButton:hover { background-color:white; color:Black;} /*-----------------------------------------------------------------------------/ /*GREEN BUTTON WITH ROUNDED CORNERS----------------------------------------------------------------------------*/ .linkButton { background-color:#249555; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ transition: background-color .5s; } .linkButton:hover{ background-color:#32c96f;} /* GREEN BUTTON IN HERO IMAGE BACKGROUND-----------------------------------------------------*/ .HeroButton { background-color:#249555; transition: background-color .5s; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ text-align:center; display:inline; height:40px; color:white; line-height:40px; margin-right:10px; padding:10px 30px 10px 30px; } .HeroButton:hover { background-color:#32c96f;} /* TABS IN COLLECTION PAGES ---------------------------------------------------------------------*/ .HeroLinkContainer{width:100%; height:100px; position:absolute; bottom:-10px; z-index:5;} .HeroLinkTab{width:25%; float:left;} .HeroLinkSelected{text-align:center; height:100px; line-height:70px; background-color:White; margin-left:20px; margin-right:20px; color:black; } .HeroLink {display:block; text-decoration:none; text-align:center; height:90px; line-height:70px; margin-left:20px; margin-right:20px; color:white;} .HeroLink:hover { border-color:rgba(204, 204, 204, .7); border-style:solid; border-width:2px; border-bottom-width:0px; height:90px; line-height:66px;background:rgba(204, 204, 204, .3)} /* HERO CONTENT ----------------------------------------------------------------------------------*/ .HeroIcon{color:white; width:100%; text-align:center; position:absolute; top:200px;} .HeroTitle {color:white; width:100%; text-align:center;} .HeroImageHomeCollection{background-image:url(Images/HomeCollectionMain.jpg);width:100%; height:500px; background-size:cover;} .HeroImageBusinessCollection{background-image:url(Images/HeroBusinessCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroImageLandfill{background-image:url(Images/WI2012_landfillP-0004v2.jpg);width:100%; height:500px; background-size:cover;} .HeroImageSpecialtyCollection{background-image:url(Images/HeroSpecialtyCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroFilter{background:rgba(0,0,0,0.4); position:absolute; width:100%; height:100%;z-index:1; top:0;} .SubHeroContainer {height:60px; position:relative; margin-top:0px;} .SubPageHeroTitle{color:white; width:100%; text-align:center;position:absolute; margin:0 auto; top:40%; clear:both;} .ServicesNavArrowContainer{position:absolute; width:100%;margin:0 auto; top:50%; z-index:4;} .ArrowNavLeft {transition:font-size .2s, margin-left .2s; background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; margin-left:30px; width:200px; height:63px; display:block;float:left; text-align:left; color:White;padding-left:70px; padding-top:4px; text-decoration:none; } .ArrowNavRight { transition:font-size .2s, margin-right .2s; background-image:url(images/general_icons_right_arrow.svg); background-position:right; margin-right:30px; width:220px; background-repeat:no-repeat; height:63px; display:block; float:right; text-align:left; color:White;padding-left:50px; padding-top:4px; text-decoration:none; } .ArrowNavLeft:hover{margin-left:15px;} .ArrowNavRight:hover{margin-right:15px;} .HeroPageNavLeft {transition:font-size .2s, margin-left .2s; display:block;float:left; margin-left:30px; text-decoration:none; } .HeroPageNavRight { transition:font-size .2s, margin-right .2s; display:block;float:right; margin-right:30px; text-decoration:none; } .HeroPageNavLeft:hover{margin-left:15px;} .HeroPageNavRight:hover{margin-right:15px;} .HeroPageNavRightArrow {float:right; color:White; background-image:url(images/general_icons_right_arrow.svg);background-repeat:no-repeat; height:60px; width:50px; vertical-align:middle; margin-top:-5px;} .HeroPageNavLeftArrow {display:inline-block; float:left; color:White; position:relative;background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; height:60px; width:50px; vertical-align:middle; margin-top:-5px;} /*SUB PAGE LINK NAVIGATION -----------------------------------------------------------------------*/ .subNavContainer {color:#249555; padding-top:30px; clear:left;} .subNavContainer a{color:#249555; text-decoration:none;} .subNavContainer a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} /*-------------------------------------------------------------------------------------------------*/ .newsButton {height:60px; width:90px; color:#249555; text-align:center; line-height:60px; margin-top:10px; margin-right:10px; z-index:100; text-decoration:none;} .newsButton:hover{color:#32c96f; text-decoration:underline;} article{margin-left:10%; margin-right:10%; } .PageLinkContainer {clear:left; width :100%; overflow:hidden;} .PageLinkContainer .PageLink {background-color:#a6a8ab;} .PageLink { float:left; width:25%; height:90px; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; color:black; line-height:90px;} .PageLink.active{background-color:White;} .SubPageMenuSeperatorLine {margin-left:20%; margin-right:20%; margin-top:40px; height:1px; background-color:silver;} /*Seconday Links ---------------------------------------------------*/ .SecondaryServicesContainer {clear:left; width:100%; position:relative; overflow:hidden;padding-top:3px; padding-bottom:0px; margin-bottom:0px; height:335px; } .SecondaryServiceItem {background-color:#e5e6e7; height:335px; transition: background-color .5s;} .SecondaryServiceItem:hover {background-color:#ccc;} .SecondaryServiceItemHeaderText{color:black; padding-top:100px;text-align:center; padding-bottom:15px;} .SecondaryServiceItemDivider {background-color:Black; height:210px; width:1px; float:right; margin-top:60px} .SecondaryLinksText {display:block;} /*------------------------------------------------------------------*/ .FooterImagesContainer{float:left; width:20%;} .FooterWiLogo{height:85px; padding-left:4px;} .FooterErefLogo{clear:both; padding-top:20px; height:85px;} .FooterSocialIconsContainer{float:left;width:20%;padding-bottom:10px;} .FooterCompanyLinksContainer{float:left;width:20%;} .FooterConnectLinksContainer{float:left;width:20%;} .FooterServicesLinksContainer{float:left;width:20%;} .FileNotFoundImage {z-index:50;background-image: url('/Images/404_Visual.svg'); background-repeat:no-repeat; width:500px; height:500px; position:relative; margin:0 auto; margin-top:50px;} .DumpsterImage{width:450px} .CompactorImage{width:600px;} .BillingOptionsDetails{position:relative; margin-left:200px; padding-top:20px;} .BillingOptionsIcon{float:left; display:block; position:relative;} .CharityClassContainer{height:250px;} .CharityClassTitle{padding-top:70px; padding-bottom:10px;} .CharityClassesImageLeft{position:relative; float:left; width:25%;} .CharityClassDescTextLeft{padding-right:12%;} .CharityClassesDescLeft{position:relative; float:left; width:75%;} .CharityClassesImageRight{position:relative; float:right; width:25%;} .CharityClassesDescRight{position:relative; float:right; width:75%;} .CharityClassesDescRightContainer{position:relative; float:right; padding-left:12%;} .DonationItemLeft{width:50%; position:relative; float:left;} .DonationItemRight{width:50%; position:relative; float:right;} .DonationItemLeftContainer{position:relative; float:right; padding-right:50px;} .DonationItemRightContainer{position:relative; float:left; padding-right:50px;} } @media (min-width:1350px) /* hi-res laptops and desktops */ { /* FONT STYLES --------------------------------------------------------------*/ h1{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:80px; font-weight:800; margin:0} h2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:28px; font-weight:800; margin:0;} h3{font-family:'Roboto Slab',Georgia; font-size:64px; font-weight:400; margin:0;} h4{font-family:'Lato', Arial; font-size:24px; font-weight:700; margin:0;} h5{font-family:'Roboto Slab',Georgia; font-size:64px; font-weight:300; margin:0;} h6{font-family:'Roboto Slab',Georgia; font-size:48px; font-weight:300; margin:0;} .ArticleTitle {font-family:'Lato', Arial; font-size:2em; font-weight:700; margin:0;} .ArticleBody {font-family:'Lato', Arial; font-size:17px; font-weight:200; margin:0;} .ArticleBody1 {font-family:'Lato', Arial; font-size:19px; font-weight:300; margin:0;} .ArticleBody1 p {text-align:left;} .ArticleBody2 {font-family:'Lato', Arial; font-size:16px; font-weight:300; margin:0;} .ArticleBody1 a{color:#249555; text-decoration:none; font-weight: bolder} .ArticleBody1 a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} .Button1 {font-family:'Lato', Arial; font-size:24px; font-weight:400; margin:0;} .Button2{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:24px; font-weight:400; margin:0;} .Nav1 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:32px; font-weight:400; margin:0;} .Nav2 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:24px; font-weight:400; margin:0;} .Nav3 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:19px; font-weight:400; margin:0;} .Nav4 {font-family:'Lato', Arial; font-size:24px; font-weight:700; margin:0;} .Nav5 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:600; margin:0;} .Nav6 {font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .HamburgerNav{font-family:'Open Sans', Verdana, Arial, helvetica, Sans-Serif; font-size:16px; font-weight:400; margin:0;} .Accent {font-family:'Roboto Slab',Georgia; font-size:16px; font-weight:300; margin:0;} /* --------------- ----------------------------------------------------------*/ .LinkHoverUnderline {text-decoration:none;} .LinkHoverUnderline:hover {text-decoration:underline;} /* LAYOUT FOR PAGE HEADERS - LOGO, MENU, HEADER BACKGROUND-------------------*/ /*#InclementWeatherAlert{display:none;}*/ .HamburgerMenu{ visibility:hidden;} /*FOR MOBILE*/ .MainBackgroundImage{ width:100%; position:relative; height:auto;} .BGimg{ background-image:url("images/wi logo - header.svg"); background-repeat:no-repeat; margin-left:12px; height:50px; width:350px; position:absolute; top:17px; left:0px;} .BGimgSmall{ background-image:url(Images/WI_LogoSmall.png); background-repeat:no-repeat; margin-left:50px; margin-top:30px; height:55px; width:440px;float:left; } .HeaderBackground{height:70px;background:rgba(255,255,255,0.7); top: 0; left:0; width:100%; position:fixed; z-index:100; border-bottom-color:Black; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:rgba(0, 0, 0, 0.0); } .HeaderBackgroundDark{height:100px;background:rgba(255,255,255,1); border-bottom:1px solid black;} .HeaderContainer{height:70px;position:relative; width:100%;} .HeaderMenu{float:right; padding-right:30px; height:40px; position:relative;} .HeaderMenuContent{position:relative; top:-8px; } /* ---------------------------------------------------------------------------*/ /*.HeaderSubMenu {background-color:#58595b;}*/ .HeaderSubMenu {float:left; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; line-height:40px; color:White; width:100%} .HeaderSubMenu:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:40px; color:White;} .HeaderSubMenuLink:hover{background-color:#ccc;color:Black; border-top-color:#32c96f;} .HeaderSubMenuLink2 {background-color:#58595b;float:left; width:25%; border-top-width: 3px; border-top-style:solid; border-top-color:#58595b; text-align:center; text-decoration:none; line-height:40px; color:White;} .HeaderSubMenuLink2:hover{background-color:#ccc;color:Black; border-top-color:#0461b3;} #SubContentMenu {border-top:0px; position:absolute; width:100%; top:70px; height:40px;} #SubContentMenu2 {border-top:0px; position:absolute; width:100%; top:70px; height:40px;} /* HOME PAGE LOB LINKS - HOME, BUSINESS, LANDFILL, SPECIALTY ----------------*/ .LobItemsContainer {clear:left; width:100%; background-color:white; padding-bottom:0px; padding-top:35px; position:relative; overflow:hidden;font-family:Verdana;padding-top:0px; padding-bottom:0px; margin-bottom:0px; height:425px} .LobItemsContainer a { margin-top:30px} .LobItemContainer {float:left; width:25%; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black;padding-top:50px; padding-bottom:0px; position:relative; height:390px ; padding-left:0px;} .LobItemTitle { position:relative; left:0;text-align:center; padding-bottom:0px; color:inherit; padding-bottom:15px;} /*.LobItemTitle {position:relative; top:25%; text-align:center; text-decoration:none; color:black; font-weight:bold;background:white; height:70px; line-height:70px}*/ .LobItemIcon {float:none; text-align:center; margin:0 auto; display:block; clear:left; width:120px; height:120px;} .LobItemTypeDesc {margin-left:10%; margin-right:10%; color:black; margin-top:25px; display:block;} .LobItemContainer .LobSeperator {visibility:visible;} .LobItemContainer {float:left; width:25%; transition: background-color .5s; } .LobItemContainer:hover { background-color:#bbbdbf; color:White;} .LobItemContainer:hover .LobItemTypeDesc {visibility:hidden;} .LobItemContainer:hover .LobLinksContainer { display:block; z-index:3; } .LobItemContainer:hover .LobSeperator {visibility:hidden;} .LobLinksContainer {display:none; position:absolute; top:265px; height:165px; width:100%; transition: display 1s; } .HomePageLobLearnMore{display:block; width:100%; height:80px; line-height:80px; position:absolute; top:-30px; padding-top:0px; text-align:center; text-decoration:none;} .HomePageLobSignup{width:100%; height:80px; line-height:80px; position:absolute; top:50px; text-align:center;padding-top:0px; text-decoration:none;} .HomeLobTitleText2{display:inline;} #BusinessCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} #SpecialtyCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} #LandfillCollectionItem{padding-top:50px; padding-bottom:50px; position:relative;} .HomeCollectionIconImg{background: url('images/main_icons_home_collection.svg');width:120px; height:120px;} .BusinessCollectionIconImg{background: url('images/main_icons_business_collection.svg');width:120px; height:120px;} .SpecialtyCollectionIconImg{background: url('images/main_icons_specialty_collection.svg');width:120px; height:120px;} .LandfillCollectionIconImg{background: url('images/main_icons_landfill_collection.svg');width:120px; height:120px;} #HomeCollectionItem:hover .HomeCollectionIconImg{background: url('Images/Main_Icons_White_Home_Collection.svg');} #BusinessCollectionItem:hover .BusinessCollectionIconImg{background: url('Images/Main_Icons_White_Business_Collection.svg');} #SpecialtyCollectionItem:hover .SpecialtyCollectionIconImg{background: url('Images/Main_Icons_White_Specialty_Collection.svg');} #LandfillCollectionItem:hover .LandfillCollectionIconImg{background: url('Images/Main_Icons_White_Landfill_Collection.svg');} .LobLinkButton {transition: background-color .5s; color:White; background-color:inherit; } .LobLinkButton:hover { background-color:#32c96f;} .HomePageTabTextContainer{width:70%; float:left;} .HomePageTabImageContainer{width:30%; float:left; text-align:center;} /* Primary Page Service Navs ------------------------------------------------ */ .ServicesContainer {clear:left; width :100%; overflow:hidden; height:250px;} .ServiceItem {float:left; width:25%;min-width:85px; height:250px; overflow:hidden; position:relative;} .ServiceItemMainContent {position:relative; height:250px; text-align:center; margin-left:-1px; background-color:#249655; position:relative; transition: background-color .5s;} .ServiceItemMainContent:hover {background-color:#32c96f;} .ServiceItemDivider{background-color:white; height:160px; width:2px; float:left; margin-top:45px;} .ServiceItemTitle{color:White; padding-top:40px;} .ServiceItemMainContent:hover .PrimaryCollectionNav { display:block; z-index:3; } .ServiceItemMainContent:hover .icon {display:none;} .ServiceItemIcon{padding-top:20px;} .PrimaryCollectionNav{display:none; margin-top:2px; height:150px;} .ResidentialLearnMore{display:block; width:100%; height:75px; line-height:75px; position:relative; padding-top:0px; text-align:center; text-decoration:none; color:White;} .ResidentialSignUp{display:block; width:100%; height:75px; line-height:75px; position:relative; text-align:center;padding-top:0px; text-decoration:none; color:White;} .ServiceButton {transition: background-color .5s; color:White; } .ServiceButton:hover { background-color:white; color:Black;} #ResidentialWasteCollectionIcon{background: url('/Images/Home_Collection_Service_Icons_Waste_Collection.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialWasteCollectionIcon{margin:0 auto;} #ResidentialRecyclingIcon{background: url('/images/home_collection_service_icons_recycling.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialRecyclingIcon{margin:0 auto;} #ResidentialYardWasteIcon{background: url('/Images/Home_Collection_Service_Icons_Yard Waste.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialYardWasteIcon{margin:0 auto;} #ResidentialHomeRenovationsIcon{background: url('/images/home_collection_service_icons_dumpster_rental.svg');width:100px; height:100px; background-repeat:no-repeat} .ResidentialHomeRenovationsIcon{margin:0 auto;} #CommercialDumpsterRentalIcon{background: url('/Images/Business_Collection_Service_Icons_Dumpster_Rental.svg');width:200px; height:200px; background-repeat:no-repeat} .CommercialDumpsterRentalIcon{margin:0 auto;} #CommercialRecyclingIcon{background: url('/Images/Business_Collection_Service_Icons_Recycling.svg');width:200px; height:200px; background-repeat:no-repeat} .CommercialRecyclingIcon{margin:0 auto;} #CommercialRollOffIcon{background: url('/Images/Business_Collection_Service_Icons_Roll-Off.svg');width:200px; height:200px; background-repeat:no-repeat} .CommercialRollOffIcon{margin:0 auto;} #CommercialCompactorsIcon{background: url('/Images/Business_Collection_Service_Icons_Compactors.svg');width:200px; height:200px; background-repeat:no-repeat} .CommercialCompactorsIcon{margin:0 auto;} #SpecialtyBrokerRelationsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Broker_Relations.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyBrokerRelationsIcon{margin:0 auto;} #SpecialtyCorporateAccountsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Corporate_Accounts.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyCorporateAccountsIcon{margin:0 auto;} #SpecialtyMunicipalContractsIcon{background: url('/Images/Specialty_Collection_Service_Icons_Municipalities.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyMunicipalContractsIcon{margin:0 auto;} #SpecialtyHoaIcon{background: url('/Images/Specialty_Collection_Service_Icons_HOA_Services.svg');width:125px; height:125px; background-repeat:no-repeat} .SpecialtyHoaIcon{margin:0 auto;} /*-----------------------------------------------------------------------------/ /*GREEN BUTTON WITH ROUNDED CORNERS----------------------------------------------------------------------------*/ .linkButton { background-color:#249555; /* -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; */ transition: background-color .5s; } .linkButton:hover{ background-color:#32c96f;} /* GREEN BUTTON IN HERO IMAGE BACKGROUND-----------------------------------------------------*/ .HeroButton { background-color:#249555; transition: background-color .5s; -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; text-align:center; font-family:'Lato'; font-size:24px; font-weight:400; margin:0; height:60px; display:inline; color:white; line-height:60px; margin-right:10px; padding:10px 30px 10px 30px; } .HeroButton:hover { background-color:#32c96f;} /* TABS IN COLLECTION PAGES ---------------------------------------------------------------------*/ .HeroLinkContainer{width:100%; height:100px; position:absolute; bottom:-10px; z-index:5;} .HeroLinkTab{width:25%; float:left;} .HeroLinkSelected{text-align:center; height:100px; line-height:70px; background-color:White; margin-left:20px; margin-right:20px; color:black; } .HeroLink {display:block; text-decoration:none; text-align:center; height:90px; line-height:70px; margin-left:20px; margin-right:20px; color:white;} .HeroLink:hover { border-color:rgba(204, 204, 204, .7); border-style:solid; border-width:2px; border-bottom-width:0px; height:90px; line-height:66px;background:rgba(204, 204, 204, .3)} /* HERO CONTENT ----------------------------------------------------------------------------------*/ .HeroIcon{color:white; width:100%; text-align:center; position:absolute; top:200px;} .HeroTitle {color:white; width:100%; text-align:center;} .HeroImageHomeCollection{background-image:url(Images/HomeCollectionMain.jpg);width:100%; height:500px; background-size:cover;} .HeroImageBusinessCollection{background-image:url(Images/HeroBusinessCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroImageLandfill{background-image:url(Images/WI2012_landfillP-0004v2.jpg);width:100%; height:500px; background-size:cover;} .HeroImageSpecialtyCollection{background-image:url(Images/HeroSpecialtyCollection.jpg);width:100%; height:500px; background-size:cover;} .HeroButtonContainer {height:60px; position:relative; margin-top:0px;} .HeroFilter{background:rgba(0,0,0,0.4); position:absolute; width:100%; height:100%;z-index:1; top:0;} .SubHeroContainer {height:60px; position:relative; margin-top:0px;} .SubPageHeroTitle{color:white; width:100%; text-align:center;position:absolute; margin:0 auto; top:50%; clear:both;} .ServicesNavArrowContainer{position:absolute;width:100%;margin:0 auto; top:50%; z-index:4;} .ArrowNavLeft {transition:font-size .2s, margin-left .2s; background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; margin-left:30px; width:200px; height:63px; display:block;float:left; text-align:left; color:White;padding-left:70px; padding-top:4px; text-decoration:none; } .ArrowNavRight { transition:font-size .2s, margin-right .2s; background-image:url(images/general_icons_right_arrow.svg); background-position:right; margin-right:30px; width:220px; background-repeat:no-repeat; height:63px; display:block; float:right; text-align:left; color:White;padding-left:50px; padding-top:4px; text-decoration:none; } .ArrowNavLeft:hover{margin-left:15px;} .ArrowNavRight:hover{margin-right:15px;} .HeroPageNavLeft {transition:font-size .2s, margin-left .2s; display:block;float:left; margin-left:30px; text-decoration:none; } .HeroPageNavRight { transition:font-size .2s, margin-right .2s; display:block;float:right; margin-right:30px; text-decoration:none; } .HeroPageNavLeft:hover{margin-left:15px;} .HeroPageNavRight:hover{margin-right:15px;} .HeroPageNavRightArrow {float:right; color:White; background-image:url(images/general_icons_right_arrow.svg);background-repeat:no-repeat; height:70px; width:60px; vertical-align:middle; margin-top:-3px;} .HeroPageNavLeftArrow {display:inline-block; float:left; color:White; position:relative;background-image:url(images/general_icons_left_arrow.svg); background-repeat:no-repeat; height:70px; width:60px; vertical-align:middle;; margin-top:-3px;} /*SUB PAGE LINK NAVIGATION -----------------------------------------------------------------------*/ .subNavContainer {color:#249555; padding-top:30px; clear:left;} .subNavContainer a{color:#249555; text-decoration:none;} .subNavContainer a:hover{ border-bottom-color:#249555; border-bottom-style:solid; border-bottom-width:2px;} /*-------------------------------------------------------------------------------------------------*/ .newsButton {height:60px; width:90px; color:#249555; text-align:center; line-height:60px; margin-top:10px; margin-right:10px; z-index:100; text-decoration:none;} .newsButton:hover{color:#32c96f; text-decoration:underline;} article{margin-left:10%; margin-right:10%; } .PageLinkContainer {clear:left; width :100%; overflow:hidden;} .PageLinkContainer .PageLink {background-color:#a6a8ab;} /*.PageLinkContainer a:first-of-type { background-color:White;}*/ /*.PageLinkContainer a:hover {background-color:white;}*/ /*.PageLinkContainer a:hover .PageLinkContainer>a{background-color:white;}*/ /*.PageLinkContainer a:hover {background-color:white;}*/ .PageLink { float:left; width:25%; height:90px; border-width: 0px 0px 0px 0px; border-style:solid; border-color:Black; text-align:center; text-decoration:none; color:black; line-height:90px;} .PageLink.active{background-color:White;} .SubPageMenuSeperatorLine {margin-left:20%; margin-right:20%; margin-top:40px; height:1px; background-color:silver;} /*Seconday Links ---------------------------------------------------*/ .SecondaryServicesContainer {clear:left; width:100%; position:relative; overflow:hidden;padding-top:3px; padding-bottom:0px; margin-bottom:0px; height:335px; } .SecondaryServiceItem {background-color:#e5e6e7; height:335px; transition: background-color .5s;} .SecondaryServiceItem:hover {background-color:#ccc;} .SecondaryServiceItemHeaderText{color:black; padding-top:100px;text-align:center; padding-bottom:15px;} .SecondaryServiceItemDivider {background-color:Black; height:210px; width:1px; float:right; margin-top:60px} .SecondaryLinksText {display:block;} /*------------------------------------------------------------------*/ .FooterImagesContainer{float:left; width:20%;} .FooterWiLogo{height:85px; padding-left:4px;} .FooterErefLogo{clear:both; padding-top:20px; height:85px;} .FooterSocialIconsContainer{float:right;width:20%;padding-bottom:10px;} .FooterCompanyLinksContainer{float:left;width:20%;} .FooterConnectLinksContainer{float:left;width:20%;} .FooterServicesLinksContainer{float:left;width:20%;} .FileNotFoundImage {z-index:50;background-image: url('/Images/404_Visual.svg'); background-repeat:no-repeat; width:500px; height:500px; position:relative; margin:0 auto; margin-top:50px;} .DumpsterImage{width:450px;} .CompactorImage{width:600px;} .BillingOptionsDetails{position:relative; margin-left:200px; padding-top:20px;} .BillingOptionsIcon{float:left; display:block; position:relative;} .CharityClassContainer{height:250px;} .CharityClassTitle{padding-top:70px; padding-bottom:10px;} .CharityClassesImageLeft{position:relative; float:left; width:25%;} .CharityClassDescTextLeft{padding-right:12%;} .CharityClassesDescLeft{position:relative; float:left; width:75%;} .CharityClassesImageRight{position:relative; float:right; width:25%;} .CharityClassesDescRight{position:relative; float:right; width:75%;} .CharityClassesDescRightContainer{position:relative; float:right; padding-left:12%;} .DonationItemLeft{width:50%; position:relative; float:left;} .DonationItemRight{width:50%; position:relative; float:right;} .DonationItemLeftContainer{position:relative; float:right; padding-right:50px;} .DonationItemRightContainer{position:relative; float:left; padding-right:50px;} } /*---------------------------------------------------------------------------------------------------------------------*/ .clearfix:before, .clearfix:after { content: ""; display: table; } clearfix:after { clear:both; } .rounded-corners5 { -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } .rounded-corners { -moz-border-radius: 30px; -webkit-border-radius: 30px; -khtml-border-radius: 30px; border-radius: 30px; } .rounded-button-corners { -moz-border-radius: 15px; -webkit-border-radius: 15px; -khtml-border-radius: 15px; border-radius: 15px; } /* Start of Column CSS */ #container3 { clear:left; float:left; width:100%; overflow:hidden; /*background:#89ffa2; /* column 3 background colour */ background:white; /* column 3 background colour */ font-family:Chivo; border-top:1px solid black; } #container2 { clear:left; float:left; width:100%; position:relative; right:33.333%; /*background:#ffa7a7; /* column 2 background colour */ background:#d0d2d3; /* column 2 background colour */ border-right:1px solid black; } #container1 { float:left; width:100%; position:relative; right:33.33%; /*background:#fff689; /* column 1 background colour */ background:#d0d2d3; /* column 1 background colour */ border-bottom:1px solid black; border-right:1px solid black; } #col1 { float:left; width:29.33%; position:relative; left:68.67%; overflow:hidden; height:70px; color:Black; } #col2 { float:left; width:29.33%; position:relative; left:72.67%; overflow:hidden; height:70px; color:Black; } #col3 { float:left; width:29.33%; position:relative; left:76.67%; overflow:hidden; height:70px; color:Black; border-bottom:1px solid black; } /*Green Button styles*/ .corp-button { min-width: 335px; } .corp-button .main { width: 540px; background-color: rgb(36,149,85); transition: width .5s ease; } .corp-button:hover .main { width: 85px; background-color: rgb(56,169,105); box-shadow: 2px 0px 5px 1px rgba(0,0,0,.2); transition: width .5s ease, background-color 1s; } .corp-button .sign-up { right: -100px; font-family: Arial; transition: right .5s; } .corp-button:hover .sign-up { right: 100px; box-shadow: 2px 0px 4px 1px rgba(0,0,0,.4); transition: right .5s; } @media screen and (max-width: 1240px) { .corp-button .sign-up-descr { display:none; } .corp-button:hover .sign-up span { padding-left: 85px; } } .corp-button .learn-more { right: -100px; font-family: Arial; transition: right .5s; } .corp-button:hover .learn-more { right: 0px; transition: right .5s; } .corp-button .icon { opacity: 1; width: 75px; z-index: 11; background-color: rgba(36,149,85,1); } .corp-button:hover .icon { /*opacity: 0;*/ background-color: rgb(56,169,105); transition: background-color 1s; } .corp-button .name { left: 80px; opacity: 1; font-family: Arial; transition: left .5s, opacity .5s .1s; } .corp-button:hover .name { left: -30px; opacity: 0; transition: opacity .25s, left .4s; } /*End of Green Button styles*/ /*Signup buttons styles*/ .item-container { width: 220px; height: 220px; background-color: rgba(0,0,0,0); border: 1px solid rgba(0,0,0, .4); border-radius: 2px; position: relative; margin: 9px; float:left; cursor: default; transition: all .1s; /*box-shadow: inset rgba(0,0,0,.3) 0px 0px 5px 1px;*/ } .item-container:hover { border: 1px solid rgba(36,149,85, .7); margin: 9px; } #svg-image-blur { height: 220px; width: 220px; filter:url(#blur-effect-1); } .item-container.selected { background-color: rgb(46,159,95); border: 1px solid rgb(6,119,55); border-radius: 2px; margin: 9px; transition: all .1s; } .checked { position: absolute; top: 0; left: 0; padding-top: 5px; padding-left: 10px; height: 40px; width: 40px; font-size: 30px; color:rgba(36,149,85, 1); z-index: 10; opacity: 0; transition: opacity .25s; } .item-container.selected .checked { opacity: 1; color: rgba(0,0,0,.4); opacity: 1; } .item-container:hover .checked { color:rgba(16,129,65, 1); opacity: 0; transition: opacity .25s; } .item-container.selected:hover .checked { color: rgba(0,0,0,.4); opacity: 1; } .item-content { left: 0; right: 0; top: 0; bottom: 0; position: absolute; text-align: center; padding-top: 25px; color:rgba(0,0,0,.3); font-size: 24px; z-index:10; } .item-container:hover .item-content { color:rgba(16,129,65, .6); } .item-container.selected .item-content { color:white; } .item-container.selected .title { color:rgba(0,0,0, .4); } .item-container:hover .title { color:rgba(16,129,65, .6); } .title { color:rgba(0,0,0, .4); } .item-container.selected .title { color: white; } .item-container.selected .checked{ display: block; } .next { border: 1px solid rgba(0,0,0,.4); border-radius: 4px; color: rgba(0,0,0,.4); } .corp-button { min-width: 335px; } .border.white .corp-button { min-width: 335px; border: 1px solid rgba(0,0,0,0); } .border.black .corp-button { min-width: 335px; border: 1px solid rgba(0,0,0,1); } .border.green .corp-button { min-width: 335px; border: 1px solid rgb(0,113,49); } .corp-button .main { width: 540px; background-color: rgb(36,149,85); transition: width .5s ease; } .corp-button:hover .main { width: 85px; background-color: rgb(56,169,105); box-shadow: 2px 0px 5px 1px rgba(0,0,0,.2); transition: width .5s ease, background-color 1s; } .corp-button .sign-up { right: -100px; font-family: Arial; transition: right .5s; } .corp-button:hover .sign-up { right: 100px; box-shadow: 2px 0px 5px 1px rgba(0,0,0,.45); transition: right .5s; } .corp-button .sign-up > span { padding-left: 100px; } @media screen and (max-width: 1240px) { .corp-button .sign-up-descr { display:none; } .corp-button .sign-up span { padding-left: 85px; } } .corp-button .learn-more { right: -100px; font-family: Arial; transition: right .5s; } .corp-button:hover .learn-more { right: 0px; transition: right .5s; } .corp-button .icon { opacity: 1; width: 75px; z-index: 11; background-color: rgba(36,149,85,1); } .corp-button:hover .icon { /*opacity: 0;*/ background-color: rgb(56,169,105); transition: background-color 1s; } .corp-button .name { left: 80px; opacity: 1; font-family: Arial; transition: left .5s, opacity .5s .1s; } .corp-button:hover .name { left: -30px; opacity: 0; transition: opacity .25s, left .4s; } /*End Signup buttons styles*/