/********************************************************** REMEMBER TO PLACE code below in of site and Mobile **********************************************************/ /********************************************************** Extra CSS **********************************************************/ .topline { height:0px; width:1px; border-bottom:5px solid #8bc056; -webkit-animation: increase 3s; -moz-animation: increase 3s; -o-animation: increase 3s; animation: increase 3s; animation-fill-mode: forwards; } @keyframes increase { 100% { width: 300px; } } #rectangle { width: -50px; height: 12px; background: #8bc056; } hr.footer { border: 0.5px solid #7cc242; } /********************************************************** HOME PAGE CSS **********************************************************/ /* HOME PAGE CONTENT - Home Page 3 Squares - Z-Index [INCLUDE =1001]*/ .thirds-one-desktop { width: 368px; height: 216px; position: absolute; z-index: 2; top: 545px; padding: 0px 1% 0px 0%; vertical-align: top;/*Fix for different height elements*/ margin: 0px; display: inline-block; background-image: url('/img/home/img001.jpg') ; } @media screen and (max-width: 680px) { .thirds-one-desktop { width: 100%; padding: 0px; margin: 30px 0px; } } .thirds-two-desktop { width: 368px; height: 216px; position: absolute; z-index: 2; top: 545px; padding: 0px 1% 0px 0%; vertical-align: top;/*Fix for different height elements*/ margin: 0px; display: inline-block; background-image: url('/img/home/img002.jpg') ; } @media screen and (max-width: 680px) { .thirds-two-desktop { width: 100%; padding: 0px; margin: 30px 0px; } } .thirds-three-desktop { width: 368px; height: 216px; position: absolute; z-index: 2; top: 545px; padding: 0px 1% 0px 0%; vertical-align: top;/*Fix for different height elements*/ margin: 0px; display: inline-block; background-image: url('/img/home/img003.jpg') ; } @media screen and (max-width: 680px) { .thirds-three-desktop { width: 100%; padding: 0px; margin: 30px 0px; } } .thirds-white { width: 31%; height: auto; padding: 0px 1% 0px 0%; text-align: center; vertical-align: top;/*Fix for different height elements*/ margin: 0px; display: inline-block; background-color:#fff; } @media screen and (max-width: 680px) { .thirds-white { width: 100%; padding: 0px; margin: 30px 0px; } } .thirds-container { padding: 5% 5% 5% 5%; } /* HOME PAGE 3 buttons */ .three-cursor { width: 100%; padding: 0px; text-align: left; vertical-align: middle;/*Fix for different height elements*/ display: inline-block; cursor: pointer; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .three-cursor:hover, .three-cursor:focus, .three-cursor:active { -webkit-transform: scale(0.9); transform: scale(0.9); } @media screen and (max-width: 680px) { .three-cursor { width: 100%; padding: none; margin-bottom: 30px; } } /* SUBFOOTER 1 - Quality Sweeping. Reliable Service. [INCLUDE =1002]*/ .fourths-left-cursor { width: 23.45%; padding-right: 1.25%; text-align: left; vertical-align: middle;/*Fix for different height elements*/ margin-bottom: 50px; display: inline-block; cursor: pointer; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .fourths-left-cursor:hover, .fourths-left-cursor:focus, .fourths-left-cursor:active { -webkit-transform: scale(0.9); transform: scale(0.9); } @media screen and (max-width: 680px) { .fourths-left-cursor { width: 100%; padding: none; margin-bottom: 30px; } } /* SUBFOOTER 2 - Service Area [INCLUDE =1006]*/ .image-right { width: 50%; vertical-align: top;/*Fix for different height elements*/ text-align: right; float: right; margin: 30px 0px 5% 0px; display: inline-block; } @media screen and (max-width: 680px) { .image-right { width: 100%; margin: none; padding:none; } } /* FOOTER - Logo, Phone Number, Address */ .footerblock { width: 33%; vertical-align: top;/*Fix for different height elements*/ text-align: middle; margin: 0px; padding: 20px 0px 0px 0px; display: inline-block; } @media screen and (max-width: 680px) { .footerblock { width: 92%; padding: 3%; margin-top: 0px; margin-bottom: 1px; } } /* DOCUMENTS PAGE */ .half-cursor { width: 43%; padding-right: 1.25%; text-align: left; vertical-align: middle;/*Fix for different height elements*/ margin-bottom: 50px; display: inline-block; cursor: pointer; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .half-cursor:hover, .half-cursor:focus, .half-cursor:active { -webkit-transform: scale(0.9); transform: scale(0.9); } @media screen and (max-width: 680px) { .half-cursor { width: 100%; padding: none; margin-bottom: 30px; } } /* Side buttons - .side used for Team .side-cursor used for side buttons (Get an Estimate, Locations Served, Our Service Commitment ) on pages */ .side { width: 100%; padding:0; text-align: center; vertical-align: middle;/*Fix for different height elements*/ margin-bottom: 50px; display: inline-block; } @media screen and (max-width: 680px) { .side { width: 100%; padding: none; margin-bottom: 30px; } } .side-cursor { width: 100%; padding:0; text-align: center; vertical-align: middle;/*Fix for different height elements*/ margin-bottom: 50px; display: inline-block; cursor: pointer; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); box-shadow: 0 0 1px transparent; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-property: transform; transition-property: transform; } .side-cursor:hover, .side-cursor:focus, .side-cursor:active { -webkit-transform: scale(0.9); transform: scale(0.9); } @media screen and (max-width: 680px) { .side-cursor { width: 100%; padding: none; margin-bottom: 30px; } } /********************************************************** PAGE TEMPLATE CSS **********************************************************/ /* Contain Page Content with div */ .page-container { width: 100%; padding: 5% 0%; vertical-align: top;/*Fix for different height elements*/ margin-top: 10px; margin-bottom: 30px; display: inline-block; } @media screen and (max-width: 680px) { .page-container { width: 90%; padding: 0% 5%; margin-top: 20px; margin-bottom: 30px; } } /* Column 1 = Full width 100%, HEADER 1
*/ .column001 { width: 100%; padding: 0px; vertical-align: top;/*Fix for different height elements*/ margin-top: 2px; margin-bottom: 10px; display: inline-block; } @media screen and (max-width: 680px) { .column001 { width: 92%; padding: 3%; margin-top: 20px; } } /* Column 2 and 3 (62/33) = Text on the left, image on the right
*/ .column002 { width: 60%; padding-right: 5%; vertical-align: top;/*Fix for different height elements*/ margin-top: 0px; margin-bottom: 0px; display: inline-block; } @media screen and (max-width: 680px) { .column002 { width: 92%; padding: 3%; margin-bottom: 10px; } } .column003 { width: 33%; vertical-align: top;/*Fix for different height elements*/ text-align: right; margin-top: 0px; margin-bottom: 0px; display: inline-block; } @media screen and (max-width: 680px) { .column003 { width: 92%; padding: 3%; margin-top: 0px; margin-bottom: 1px; } }