[css
BROWN=”#68615b”
ORANGE=”#b76643″
NAVYBLUE=”#272c33″
DARKBLUE=”#213d58″
MEDIUMBLUE=”#305b85″
LIGHTBLUE=”#6aa3be”
TURQUOISE=”#6fdddd”
FONT1=”Montserrat, sans-serif”
FONT2=”Montserrat, sans-serif”
]
/* Default Styles */
html {
margin-top: 0px !Important;
}
#wpadminbar {
display: none !important;
}
body {
font-family: %FONT1%;
}h1, h1 a {
color: #0f2b17;
font-family: %FONT2%;
font-size: 2em;
font-weight: bolder;
line-height: 1.27em;
margin: 25px 0;
}h2 {
color: #0f2b17;
font-family: %FONT2%;
font-size: 32px;
font-weight: bolder;
line-height: 2.5rem;
letter-spacing: 1px;
margin: 0 0 22px 0;
}h3 {
color: #1c4224;
font-family: %FONT2%;
font-size: 1.3em;
line-height: 1.5rem;
margin: 23px 0;
}h4 {
color: #1c4224;
font-family: %FONT2%;
font-size: 1.5em;
font-weight: bold;
line-height: 1.5rem;
margin: 25px 0;
}p {
color: #3e3e3e;
font-family:%FONT1%;
font-size: 16px;
line-height: 1.8;
margin: 15px 0;
}ul {
color: %BROWN%;
font-family: %FONT1%;
font-size: 16px;
list-style-type: none;
}figure {
margin: 0 auto;
}.row {
margin: 0 auto;
max-width: 98em;
width: 100%;
}.full-width {
max-width: 100%;
}.overflow-hidden {
overflow: hidden !important;
}.strip-padding {
padding-right: 0 !important;
padding-left: 0 !important;
}.vertical-padding-xx-large {
padding-top: 180px;
padding-bottom: 160px;
}.vertical-padding-extra-large {
padding-top: 120px;
padding-bottom: 110px;
}.vertical-padding-large {
padding-top: 104px;
padding-bottom: 100px;
}.vertical-padding-medium {
padding-top: 95px;
padding-bottom: 90px;
}.vertical-padding-small {
padding-top: 74px;
padding-bottom: 70px;
}[class*=”fadein-“] {
opacity: 0;
}.scrollfade {
opacity:0;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
-moz-transform: translateY(-70px);
-webkit-transform: translateY(-70px);
-o-transform: translateY(-70px);
-ms-transform: translateY(-70px);
transform: translateY(-70px);
}.scrollfade.complete {
opacity: 1;
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}.from-left.scrollfade {
-moz-transform: translateX(-70px);
-webkit-transform: translateX(-70px);
-o-transform: translateX(-70px);
-ms-transform: translateX(-70px);
transform: translateX(-70px);
}.from-right.scrollfade {
-moz-transform: translateX(70px);
-webkit-transform: translateX(70px);
-o-transform: translateX(70px);
-ms-transform: translateX(70px);
transform: translateX(70px);
}.from-left.scrollfade.complete {
opacity: 1;
-moz-transform: translateX(0px);
-webkit-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}.from-right.scrollfade.complete {
opacity: 1;
-moz-transform: translateX(0px);
-webkit-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}.from-bottom.scrollfade.complete {
opacity: 1;
-moz-transform: translateY(0px);
-webkit-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}.from-bottom.scrollfade {
-moz-transform: translateY(70px);
-webkit-transform: translateY(70px);
-o-transform: translateY(70px);
-ms-transform: translateY(70px);
transform: translateY(70px);
}
@-moz-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
transform: translateY(0);
} 40% {
-moz-transform: translateY(-8px);
transform: translateY(-8px);
} 60% {
-moz-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
} 40% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
} 60% {
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-webkit-transform: translateY(0);
transform: translateY(0);
} 40% {
-moz-transform: translateY(-8px);
-ms-transform: translateY(-8px);
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
} 60% {
-moz-transform: translateY(-5px);
-ms-transform: translateY(-5px);
-webkit-transform: translateY(-5px);
transform: translateY(-5px);
}
}
.bounce {
animation: bounce 2s infinite;
-moz-animation: bounce 2s infinite;
-webkit-animation: bounce 2s infinite;
}.absolute {
position: absolute !important;
}.relative {
position: relative !important;
}.page-wrapper {
max-width: 75rem;
clear: both;
}
/* Header */
.header-wrapper {
float: left;
position: fixed;
width: 100%;
z-index: 99;
}.header-company-details {
padding: 8px 0;
}.header-company-title {
color: #ffffff;
font-size: 25px;
font-weight: bold;
margin: 0;
}.header-company-title a {
color: #ffffff;
float: left;
font-size: 25px;
font-weight: bold;
line-height: 1.1em;
margin: 21px 0 5px 0;
text-align: left;
text-decoration: none;
width: 100%;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}.header-company-serviceorder {
color: #ffffff;
font-size: 16px;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}.navigation-wrapper {
background: #ffffff;
border-bottom: 1px solid whitesmoke;
float: left;
padding: 3px 0px;
width: 100%;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}.header-inner-wrapper {
min-height:106px;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}.header-inner-wrapper .logo-wrapper {
float: left;
max-width: 90px;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}.social-header {
padding-top: 40px;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}.social-header .social-title {
color: #b7b7b7;
font-family: %FONT1%;
font-size: 14px;
font-weight: lighter;
letter-spacing: 3px;
text-transform: uppercase;
}.social-header .social-title:after {
background: %ORANGE%;
bottom: 50%;
content: “”;
display: inline-block;
height: 3px;
position: absolute;
right: 0;
top: 49%;
width: 67px;
}.social-header .fa {
color: #ffffff;
margin: 0 10px;
}.social-header .fa:hover {
color: %LIGHTBLUE%;
}.header-phone {
background: %LIGHTBLUE%;
height: 100%;
padding: 0;
}.header-phone a {
box-shadow: 1px 1px 40px 0px rgba(0, 0, 0, 0.29);
color: #ffffff;
display:block;
font-family:%FONT1%;
font-size: 13px;
font-weight: bold;
letter-spacing: 4px;
height: 106px;
padding-top: 45px;
text-transform: uppercase;
width: 100%;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}.header-phone a:hover {
background:%MEDIUMBLUE%;
}
/* Navigation */
.top-bar {
background: none;
display: inline-block;
}.top-bar-section ul li{
background:none;
text-align: center;
}.top-bar-section li:not(.has-form) a:not(.button),
.top-bar-section li.active:not(.has-form) a:not(.button),
.top-bar-section ul li.has-dropdown a:not(.has-form) {
background:none;
color: #000000;
font-family:%FONT1%;
font-size: 11px;
letter-spacing: 2px;
padding: 0 30px;
text-transform:uppercase;
}.top-bar-section li.active:not(.has-form) a:not(.button):hover,
.top-bar-section li:not(.has-form) a:not(.button):hover,
.top-bar-section li.active:not(.has-form) a:not(.button) {
background: none;
color: %NAVYBLUE%;
}.top-bar-section .dropdown {
background: #1c4224;
left: 50%;
margin-top:0px;
opacity:0;
padding: 15px 0;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-webkit-transition: all 700ms ease;
-moz-transition: all 700ms ease;
-ms-transition: all 700ms ease;
-o-transition: all 700ms ease;
transition: all 700ms ease;
} .top-bar-section .has-dropdown.not-click:hover>.dropdown {
box-shadow: -1px 6px 20px 0px rgba(52, 51, 51, 0.71);
opacity:1;
}.top-bar-section .has-dropdown>a:after {
border-color: #1c4224 transparent transparent transparent;
left: 0;
margin: auto;
right: 0;
top: 35px;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-ms-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}.top-bar-section .has-dropdown:hover>a:after {
border-color: #1c4224 transparent transparent transparent;
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}.top-bar-section .dropdown li:not(.has-form) a:not(.button) {
background: none !important;
color:#ffffff;
font-size: 10px;
} .top-bar-section .dropdown li:not(.has-form) a:not(.button):hover {
background: #0d2712 !important;
color: #ffffff;
}.top-bar-section .dropdown li.active:not(.has-form) {
background:#337d43;
}.top-bar-section .has-dropdown>a {
padding-right: 30px !important;
}
/* Sticky Navigation */
.sticky-nav.active .header-company-title a {
font-size: 21px;
margin:3px 0;
}.sticky-nav.active .header-inner-wrapper .logo-wrapper {
max-width: 54px;
}.sticky-nav.active .social-header {
padding-top: 27px;
}.sticky-nav.active .header-phone a {
height: 70px;
padding-top: 25px;
}.sticky-nav.active .header-inner-wrapper {
min-height: 60px;
}.sticky-nav.active .navigation-wrapper {
padding:0;
}.sticky-nav.active .header-company-serviceorder {
font-size:14px;
}
/* Slider */
.slider-wrapper {
height: 85vh;
}.slick-background-wrapper {
left: 0;
overflow: hidden;
position: absolute;
top: 0 !important;
width: 100% !important;
z-index: -1;
}
/* Tagline */
.tagline-wrapper {
background: %BROWN%;
float: left;
width: 100%;
}.tagline {
background: %MEDIUMBLUE%;
}.tagline p {
color: #ffffff;
display: inline-block;
font-family: %FONT2%;
font-size: 25px;
line-height: 1.8;
margin: 6px 0;
}.scroll-arrow {
cursor: pointer;
padding:13px 0px;
}.scroll-arrow .fa {
color: #ffffff;
font-size: 1.7em;
-webkit-transition: all 1200ms ease;
-moz-transition: all 1200ms ease;
-ms-transition: all 1200ms ease;
-o-transition: all 1200ms ease;
transition: all 1200ms ease;
}.scroll-arrow:hover .fa {
text-shadow: 0px 2px 20px rgba(0, 0, 0, 0.59);
}.located-in p {
color: #8c8c8c;
font-size: 12px;
font-weight: lighter;
line-height: 10px;
letter-spacing: 3px;
text-transform: uppercase;
}
/* Content */
.dark-blue {
background: #ffffff;
}.split-content {
float: left;
width: 100%;
}.content-container {
overflow: hidden;
padding: 5.6vw 5vw;
}#roof-layers {
height: 530px;
}#roof-layers span {
background:url(“%THEME%/images/roof-layers.png”);
display:inline-block;
height:44px;
opacity:0;
position:absolute;
top:0;
width:98px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}#roof-layers .layer-2 {
background-position:0 -60px;
}#roof-layers .layer-3 {
background-position:0 -120px;
}#roof-layers .layer-4 {
background-position:0 -190px;
}#roof-layers .layer-5 {
background-position:0 -265px;
}#roof-layers .layer-6 {
background-position:0 -340px;
}#roof-layers .layer-7 {
background-position:0 -410px;
}#roof-layers .layer-8 {
background-position:0 -482px;
}#roof-layers .active {
opacity:1;
position:relative;
}#roof-layers .layer-2.active {
top: 10px;
}#roof-layers .layer-3.active {
top:20px;
}#roof-layers .layer-4.active {
top:40px;
}#roof-layers .layer-5.active {
top:60px;
}#roof-layers .layer-6.active {
top:80px;
}#roof-layers .layer-7.active {
top:100px;
}#roof-layers .layer-8.active {
top:120px
}.triangle-corners::before {
border-bottom: 40px solid transparent;
border-left: 35px solid #0f2b17;
border-right: 35px solid #0f2b17;
border-top: 0px solid;
content:””;
display:block;
left:0;
position:absolute;
top:-50px;
width:100%;
-webkit-transition: all 1200ms ease;
-moz-transition: all 1200ms ease;
-ms-transition: all 1200ms ease;
-o-transition: all 1200ms ease;
transition: all 1200ms ease;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}.triangle-corners::after {
border-bottom: 0px solid;
border-left: 30px solid #0f2b17;
border-right: 0px solid transparent;
border-top: 30px solid transparent;
bottom:-50px;
content:””;
display:block;
left:0;
position:absolute;
width:100%;
-webkit-transition: all 1200ms ease;
-moz-transition: all 1200ms ease;
-ms-transition: all 1200ms ease;
-o-transition: all 1200ms ease;
transition: all 1200ms ease;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}.scrollfade.complete .triangle-corners::before,
.scrollfade.complete.triangle-corners::before {
content:””;
left:0;
top:0px;
}.scrollfade.complete .triangle-corners::after,
.scrollfade.complete.triangle-corners::after {
content:””;
left:0;
bottom:0;
}.contact-page.triangle-corners::before {
top: 0;
}.contact-page.triangle-corners::after {
bottom: 0;
}.content-wrapper {
background: #ffffff;
}.content-wrapper .special-font {
color: #216935;
display:block;
font-family:%FONT1%;
font-size:20px;
line-height: 19px;
text-transform: uppercase;
}.content-wrapper .separator {
background: #1c4224;
display:block;
height:3px;
margin-top:20px;
position:relative;
width:50px;
}.content-wrapper .separator.text-center {
margin-left: auto;
margin-right: auto;
}.btn-1 {
background: #040404;
bottom: 0;
position: relative;
font-size: 12px;
font-family: %FONT1%;
letter-spacing: 4px;
margin: 0;
right: 0;
padding: 16px 0px;
text-transform: uppercase;
width: 300px;
z-index: 1;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}.btn-1:hover,
.btn-1:focus {
background: #216935;
width:340px;
}.btn-1 .fa {
position: relative;
right:0;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}.btn-1:hover .fa {
right: -30px;
}.img-container {
background-size: cover !important;
background-position: center center !important;
}.img-container-1 {
background: url(%THEME%/images/residential-home-img1.jpg);
}.img-container-2 {
background: url(%THEME%/images/residential-home-img2.jpg);
}
/* CTA section */
.cta-section {
background: #040404;
padding: 87px 0;
}.cta-section h2 {
color: #296339;
}.cta-section .special-font {
color: #ffffff;
}.cta-section p {
color:#ffffff;
}.btn-2 {
background-color: #0f2b17;
border-radius: 5px;
font-size: 14px;
font-weight: lighter;
letter-spacing: 2px;
margin-top: 40px;
max-width: 478px;
padding: 22px 0;
text-transform: uppercase;
width: 100%;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}.btn-2:hover {
background-color: #296339;
box-shadow: 1px 1px 40px 6px rgba(0, 0, 0, 0.29);
}
/* Inner page */
.inner-page h1 {
color: #0f2b17;
font-family: %FONT2%;
font-size: 32px;
font-weight: bolder;
letter-spacing: 1px;
line-height: 2.5rem;
margin: 0 0 22px 0;
}.inner-page .dark-blue h2 {
color: #0f2b17;
padding-top: 35px;
}.inner-page .dark-blue h2 span {
color: #216935;
}.inner-page .dark-blue h3 {
color: #216935;
}.inner-page .dark-blue p {
color:#000;
}.inner-page .dark-blue ul.square {
color: #000;
}.inner-page .top-section {
background:url(“%THEME%/images/inner-page-bg.jpg”);
background-attachment:fixed;
background-size:cover;
}
/* Gallery */
.gallery-page .gallery-wrapper .gallery-image {
border: 0;
opacity:1;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}.gallery-page .gallery-wrapper .gallery-image:hover {
box-shadow:0px 5px 50px 0px black;
opacity:0.8;
}.gallery-page .gallery-wrapper .gallery-image::before {
border-bottom: 40px solid transparent;
border-left: 35px solid %DARKBLUE%;
border-right: 35px solid %DARKBLUE%;
border-top: 0px solid transparent;
content:””;
display:block;
height:30px;
position:absolute;
top:-50px;
width:100%;
z-index:9;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}.gallery-page .gallery-wrapper .gallery-image::after {
border-bottom: 0px solid transparent;
border-left: 35px solid %DARKBLUE%;
border-right: 35px solid %DARKBLUE%;
border-top: 35px solid transparent;
bottom:-50px;
content:””;
display:block;
height:30px;
position:absolute;
z-index:9;
width:100%;
-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
}.gallery-page .gallery-wrapper .gallery-image:hover::before {
border-left: 35px solid %DARKBLUE%;
border-right: 35px solid %DARKBLUE%;
border-top: 0px solid transparent;
border-bottom: 40px solid transparent;
content:””;
display:block;
height:30px;
position:absolute;
top:0px;
z-index:9;
width:100%;
}.gallery-page .gallery-wrapper .gallery-image:hover::after {
border-left: 35px solid %DARKBLUE%;
border-right: 35px solid %DARKBLUE%;
border-top: 35px solid transparent;
border-bottom: 0px solid transparent;
bottom:0px;
content:””;
display:block;
height:30px;
position:absolute;
width:100%;
z-index:9;
}
/* Footer */
.footer-wrapper {
background: #ffffff;
padding: 25px 0;
position:relative;
width: 100%;
}.footer-wrapper h1 {
padding: 0 0 25px 0;
}.footer-wrapper p {
color: #000;
font-size: 14px;
letter-spacing: 3px;
text-transform: uppercase;
}.footer-wrapper strong {
color: #0f2b17;
display: block;
}.scrollTop {
bottom: 0;
color: #0f2b17;
font-size: 36px;
right: 0;
padding: 8px 18px;
z-index: 99;
}.scrollTop .fa {
cursor:pointer;
}.contact-page {
position:relative;
}.contactForm {
margin-top: 37px;
}.contactForm label{
display: block;
font-weight: bold;
}.contactForm input {
box-shadow: none;
font-size: 17px;
height: 2.5rem;
margin-bottom: 15px;
padding: 0px 13px;
width: 100%;
}.contactForm textarea {
box-shadow: none;
font-size: 17px;
margin-bottom:15px;
padding: 16px 13px;
width: 100%;
}.contactForm input:focus,
.contactForm textarea:focus {
border: 1px solid #e0e0e0;
box-shadow: 1px 5px 20px 0px #c3c3c3;
}.contactForm .captchaRefresh {
vertical-align: top;
}.contactForm .submitWrapper {
margin-top: 30px;
text-align: center;
}.contactForm .submitWrapper span.submit {
color: #ffffff;
background: #000000;
cursor: pointer;
display: inline-block;
font-family: %FONT2%;
font-size: 23px;
padding: 10px 20px;
width: 100%;
-webkit-transition: all 900ms ease;
-moz-transition: all 900ms ease;
-ms-transition: all 900ms ease;
-o-transition: all 900ms ease;
transition: all 900ms ease;
}.contactForm .submitWrapper span.submit:hover {
background-color: #1c4224;
box-shadow: 0px 6px 20px 5px rgba(0, 0, 0, 0.35);
}.google-map {
box-shadow: -5px 4px 39px -2px rgba(0, 0, 0, 0.36);
}.emailConfirmation {
margin: 0 auto;
text-align: center;
}.emailConfirmation h1 {
color: #00CC00;
}

/*custom css*/
.top-bar-section .has-dropdown .dropdown li.has-dropdown>a:after {
opacity: 0;
}.no-margin {
padding-top: 0 !important;
}
.list-color {
color: #ffffff;
}.glsr-field select[name=rating] {
height: 36px !important;
}.nav-wrapper {
display: flex;
align-items: center;
padding: 2vh 0;
}.logo-home {
width: 170px;
}.social-media {
display: flex;
justify-content: center;
align-items: center;
}.social-media a {
margin: 0px 20px;
color: #000;
width: 45px;
height: 45px;
line-height: 45px;
text-align: center;
border: 1px solid #000;
border-radius: 50%;
font-size: 14px;
}.social-media a:hover {
background: #1c4224;
color: #ffffff;
}.phone-number a {
display: inline-block;
margin: 0 10px;
text-align: center;
letter-spacing: 2px;
border: 1px solid #000;
width: 100%;
max-width: 200px;
font-size: 12px;
padding: 5px 0;
position: relative;
overflow: hidden;
z-index: 1;
}.phone-number a::before {
content: “”;
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background: #1c4224;
transition: all 300ms ease;
z-index: -1;
}.phone-number a:hover::before {
left: 0%;
transition: all 300ms ease;
}.phone-number a:hover {
color: #ffffff;
transition: all 300ms ease;
}.no-margin {
margin: 0;
}.service-card {
padding: 8vh 10vh;
}.service-card h2 {
color: #0f2b17;
font-size: 3rem;
text-transform: uppercase;
letter-spacing: 6px;
}.green-text {
color: #1c4224;
font-weight: 500;
}.home-btn {
text-transform: uppercase;
font-size: 12px;
display: inline-block;
background: #000;
color: #fff;
padding: 8px 25px;
}.home-btn:hover {
color: #fff;
background: #216935;
}.row.wide {
max-width: 108em;
}.v-pad-m {
padding-top: 10vh;
padding-bottom: 10vh;
}.footer-wrapper {
display: flex;
align-items: center;
}.logo-footer img {
width: 180px;
}main {
overflow: hidden;
}p.slogan {
text-transform: uppercase;
color: #ffffff;
font-size: 22px;
font-weight: 600;
font-family: sans-serif;
background: #1b4324;
margin: 0;
letter-spacing: 6px;
}.phone-2 {
background: #216935;
padding: 1vh 0;
}.phone-2 a {
display: block;
text-align: center;
color: #fff;
}.location {
background: #0f2b17;
padding: 7px 0;
}.location p {
margin: 0;
text-align: center;
color: #fff;
}.flex {
display: flex;
}ul.circle {
list-style-type: disc;
margin-left: 1.1rem;
list-style-position: inside;
}.social-badge {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}i.fa.fa-yelp {
color: red;
font-size: 60px;
}ul.disc {
list-style-position: inside;
}.home-message {
position: relative;
}.home-message p {
position: absolute;
bottom: 0;
color: #fff;
background: rgb(0 0 0 / 0.9);
margin: 0;
padding: 1px 20px;
font-size: 13px;
}.small {
font-size: 12px;
}.shingle-color span {
font-weight: bolder;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 2px;
}.red {
color: red;
}.gray {
color: gray;
}.beige {
color: tan;
}.brown {
color: brown;
}.blue {
color: blue;
}.rda li {
margin: 20px 0;
}.tprs img {
height: 400px;
}

/*end*/

/* SLIDE OUT FORM */

.slide-out-wrapper {
position: fixed;
top: 120px;
right: 0;
background: rgba(255,255,255,0.9);
padding: 40px 70px;
z-index: 9999;
border-radius: 10px 0px 0px 15px;
-moz-transform: translateX(100%);
-webkit-transform: translateX(100%);
-o-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
-webkit-transition: all 1.2s ease;
-moz-transition: all 1.2s ease;
-ms-transition: all 1.2s ease;
-o-transition: all 1.2s ease;
transition: all 1.2s ease;
}.slide-out-wrapper.active {
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
-o-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
box-shadow: 0px 40px 40px 0px rgba(28, 28, 28, 0.2);
}.slide-out-form form {
margin: 0;
}.slide-out-form input.fancyInput[type=”text”] {
padding: 9px 25px;
font-size: 14px;
margin-bottom: 5px;
background:none;
}.slide-out-form .contactForm textarea {
background:none;
font-size: 14px;
padding: 9px 25px;
margin-bottom: 5px;
}.slide-out-form .contactForm .captchaWrapper {
font-size: 14px;
margin: 0 0 5px;
padding: 2px 25px;
background: none;
}.slide-out-form .contactForm .captchaWrapper img {
max-width: 18%;
padding-top: 3px;
}.slide-out-form .contactForm .captchaWrapper input {
background: none;
font-size: 14px;
}.slide-out-form .contactForm .submitWrapper {
margin-top: 20px;
}.slide-out-form .contactForm .submitWrapper span.submit {
font-size: 18px;
letter-spacing: 2px;
width: auto;
padding: 8px 20px;
border: 2px solid;
background: none;
color: #1c4224;
}.slide-out-form .contactForm .submitWrapper span.submit:hover {
color: %ACCENT5%;
}.slide-out-wrapper span.form-toggle {
position: absolute;
left: 0;
top: 20%;
color: #ffffff;
font-size: 24px;
width: 60px;
line-height: 60px;
text-align: center;
background: #1c4224;
box-shadow: 2px 20px 32px 0px rgba(0, 0, 0, 0.13);
-moz-transform: translateX(-80%);
-webkit-transform: translateX(-80%);
-o-transform: translateX(-80%);
-ms-transform: translateX(-80%);
transform: translateX(-80%);
cursor: pointer;
-webkit-transition: all 350ms ease;
-moz-transition: all 350ms ease;
-ms-transition: all 350ms ease;
-o-transition: all 350ms ease;
transition: all 350ms ease;
}.slide-out-wrapper span.form-toggle:hover {
background: #1c4224;
}i.toggle-left {
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
border-top: 1px solid;
border-left: 1px solid;
border-color: #ffffff;
-moz-transform: rotate(-45deg) translateY(-13%);
-webkit-transform: rotate(-45deg) translateY(-13%);
-o-transform: rotate(-45deg) translateY(-13%);
-ms-transform: rotate(-45deg) translateY(-13%);
transform: rotate(-45deg) translateY(-13%);
}i.toggle-right {
display: inline-block;
width: 25px;
height: 25px;
vertical-align: middle;
border-top: 1px solid;
border-right: 1px solid;
border-color: #ffffff;
-moz-transform: rotate(45deg) translateY(-13%);
-webkit-transform: rotate(45deg) translateY(-13%);
-o-transform: rotate(45deg) translateY(-13%);
-ms-transform: rotate(45deg) translateY(-13%);
transform: rotate(45deg) translateY(-13%);
}.badge-list li {
line-height: 1;
font-size: 28px;
text-align: center;
font-weight: 600;
padding: 20px;
}

.badge-list span {
border: 2px solid;
display: block;
padding: 20px;
min-height: 131px;
display: flex;
justify-content: center;
align-items: center;
}

.badge-list span::before {
content: ” “;
position: absolute;
z-index: -1;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
border: 5px solid #000000;
}.anchor ul{
margin-left: 0;
}

/* Laptops */
@media screen and (max-width:1440px) and (min-width:1280px) {
.header-company-title a {
margin: 17px 0 5px 0;
}.header-company-serviceorder {
font-size: 13px;
}.social-header .social-title {
letter-spacing:1px;
}.social-header .social-title:after {
right: -5px;
width:30px;
}.social-header .fa {
margin: 4px 2px;
}.header-phone a {
font-size: 15px;
padding-top: 33px;
}.sticky-nav.active .header-phone a {
padding-top: 8px;
}.sticky-nav.active .header-company-serviceorder {
font-size:11px;
}.header-phone a span {
display:block;
}.top-bar-section li:not(.has-form) a:not(.button),
.top-bar-section li.active:not(.has-form) a:not(.button),
.top-bar-section ul li.has-dropdown a:not(.has-form){
font-size: 12px;
padding: 0 13px;
}.top-bar-section .has-dropdown>a {
padding-right: 13px !important;
}.slider-wrapper {
height: 88vh;
}.slick-background-wrapper {
position: relative;
top: 100px !important;
}
}
/* Tablets */
@media screen and (max-width:1025px) {
.header-wrapper {
position: relative;
}.navigation-inner-wrapper {
padding: 0;
}.top-bar .toggle-topbar.menu-icon a {
color:#000000;
}.top-bar .toggle-topbar.menu-icon a span:after {
box-shadow: 0 0 0 1px #000000, 0 7px 0 1px #000000, 0 14px 0 1px #000000;
}.top-bar .toggle-topbar.menu-icon a span:hover:after {
box-shadow: 0 0 0 1px #000000, 0 7px 0 1px #000000, 0 14px 0 1px #000000;
}.top-bar .name {
background:#ffffff;
}.top-bar-section .dropdown li.title h5 a {
color:%LIGHTBLUE%;
}.top-bar-section li:not(.has-form) a:not(.button),
.top-bar-section li.active:not(.has-form) a:not(.button),
.top-bar-section li.has-dropdown:not(.has-form) a:not(.button) {
font-size:18px;
padding: 10px 0px;
text-align:center;
}.top-bar-section .dropdown {
left: 100%;
transform: translateX(0);
-webkit-transform: translateX(0);
transform: translateX(0);
-webkit-transform: translateX(0);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}.top-bar-section .has-dropdown>a:after {
border-color: %LIGHTBLUE% transparent transparent transparent;
left: initial;
right: 20px;
top: 20px;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}.top-bar-section .has-dropdown:hover>a:after {
-ms-transform: rotate(0);
-webkit-transform: rotate(0);
}.top-bar-section .has-dropdown>a {
padding-right: 0px !important;
}.social-header {
padding-top: 0px;
}.social-header .social-title {
display:block;
text-align:center;
padding-bottom:10px;
}.social-header .social-title::after {
bottom:0;
left:0;
margin:auto;
right:0;
}.header-phone {
margin-top: 10px;
}.header-phone a{
height: auto;
padding:10px 0px;
}.slider-wrapper {
height:330px;
}.slider-wrapper {
height: auto;
}.slick-background-wrapper {
position: relative;
}.img-container {
height:300px !Important;
}.gallery-page .gallery-wrapper .gallery-image::before,
.gallery-page .gallery-wrapper .gallery-image::after {
display:none;
}.btn-1 {
width: 100%;
position: relative !important;
}.service-card {
padding: 8vh 2vh;
}.service-card h2 {
font-size: 2rem;
}.top-bar {
width: 100%;
}.nav-wrapper {
flex-wrap: wrap;
flex-direction: row-reverse;
}.social-media {
align-items: center;
padding-top: 4vh;
}p.slogan {
font-size: 18px;
}.social-badge {
flex-wrap: wrap;
}
}
/* Smartphones */
@media screen and (max-width:767px) {
.header-inner-wrapper .logo-wrapper {
max-width: 15%;
padding-left: 10px;
width: 100%;
}.header-inner-wrapper .logo-wrapper img {
display:block;
margin: 0 auto;
max-width: 45px;
}.header-company-title a {
font-size:20px;
margin:0;
}.header-company-serviceorder {
display:block;
font-size: 11px;
line-height: 19px;
margin-top:29px;
}.social-header .social-title {
font-size:12px;
}.header-phone a {
padding: 2px 0px;
}.navigation-wrapper {
padding:0;
}.slider-wrapper {
height: 140px;
}.content-container {
padding-bottom: 64px;
padding-top: 64px;
}.top-bar-section li:not(.has-form) a:not(.button),
.top-bar-section li.active:not(.has-form) a:not(.button),
.top-bar-section li.has-dropdown:not(.has-form) a:not(.button){
font-size:14px;
}.scroll-arrow {
padding: 0;
}.tagline p {
color: #ffffff;
font-size: 15px;
margin: 0;
}.located-in p {
font-size: 9px;
line-height: 13px;
}.btn-2 {
font-size: 11px;
}.order-1 {
order: 1;
}.phone-number {
margin-top: 2vh;
font-size: 13px;
padding: 3px 0;
text-align: center;
}.footer-wrapper img {
padding: 3vh 0;
}.footer-wrapper {
flex-wrap: wrap;
}.footer-wrapper p {
font-size: 12px;
}.logo-home {
width: 110px;
}.social-media a {
width: 35px;
height: 35px;
line-height: 35px;
font-size: 12px;
}p.slogan {
font-size: 12px;
letter-spacing: 2px;
padding: 4px 0;
}.service-card {
padding: 4vh 1vh 1vh 1vh;
}.nav-wrapper {
padding: 0;
}.service-card h2 {
font-size: 1.5rem;
line-height: 1rem;
margin: 0 0 0px 0;
}p {
font-size: 14px;
}.v-pad-m {
padding-top: 3vh;
padding-bottom: 3vh;
}.social-media {
padding-top: 2vh;
}.flex {
flex-wrap: wrap;
}.location p {
font-size: 11px;
}.scrollfade {
transition: unset !important;
transform: unset !important;
}
}
[/css]

Leave a Reply

Your email address will not be published. Required fields are marked *