@charset "utf-8";

/* CSS Document */
@media screen {
html, body {
    padding: 0px;
    margin: 0px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
}
input, textarea {
    font-family: 'Montserrat', sans-serif;
}
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html, body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    overflow-x: hidden;
    min-height: 100vh;
}
body {
    display: grid;
}
#abovethefold {
    width: 100%;
    display: grid;
    box-sizing: border-box;
    grid-area: abovethefold;
    grid-template-areas: "header" "my-slideshow" "my-quick-quote";
    grid-template-columns: 100%;
    grid-template-rows: min-content auto auto;
}
#abovethefold> div {
    box-sizing: border-box;
}
header {
    display: grid;
    width: 100%;
    background-color: rgba(0,0,0,0.87);
}
#header-street-address, #header-phone-number, #header-social-icons {
    white-space: nowrap;
    display: flex;
}
header > div {
    align-items: center;
    display: flex;
}
#header-street-address {
    grid-area: header-street-address;
    padding-left: 1rem;
    font-weight: bold;
}
#header-phone-number {
    grid-area: header-phone-number;
    text-align: right;
    padding-right: 1rem;
}
#header-logo {
    grid-area: header-logo;
    padding-left: 1rem;
}
#header-nav {
    grid-area: header-nav;
    padding-right: 1rem;
    justify-content: flex-end;
}
#header-social-icons {
    grid-area: header-social-icons;
    padding-right: 1rem;
}
#my-slideshow {
    grid-area: my-slideshow;
}
#main-h1 {
    grid-area: main-h1;
}
main {
    grid-area: main;
    width: 100%;
    max-width: 1280px;
    padding-left: 1rem;
    padding-right: 1rem;
}
footer {
    background-color: #131313;
    grid-area: footer;
    background-image: url(../images/footer-bg.jpg);
    background-size: cover;
    background-position: center;
}
#d-fi, #d-fi a {
    color: rgba(255,255,255,0.55);
    font-size: .5rem;
    padding: 1rem;
    text-align: center;
}
#footer-content {
    grid-area: footer-content;
    padding: 2em;
    box-sizing: border-box;
}
#header-logo img {
    width: 100%;
    height: auto;
}
#header-logo a {
    display: block;
    line-height: 0px;
}
.slider-wrapper {
    height: 100%;
    width: 100%;
}
h1 {
    text-align: center;
}
.my-buttons {
    grid-area: my-buttons;
    margin-bottom: 20px;
}
.my-buttons a {
    overflow: hidden;
    border: solid;
    border-width: 10px;
    border-color: #484848;
    display: block;
    line-height: 0px;
    color: #FFF;
    text-align: center;
    position: relative;
    margin-left: 5px;
    margin-right: 5px;
}
.my-buttons img {
    transition: all .4s ease-in-out;
    width: 100%;
    height: auto;
}
.my-buttons img:hover {
    transform: scale(1.1);
}
.my-buttons div {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgba(0,0,0,0.63);
    line-height: 1.1rem;
}
.owl-item {
    height: 100% !important;
}
.stretch {
    white-space: nowrap;
    padding: 2%;
}
#my-slideshow {
    position: relative;
}
#my-slideshow .sa_owl_theme .owl-dots {
    z-index: 5;
}
#my-slideshow .owl-dots .owl-dot span {
    background-color: #ffffff !important;
}
#my-slideshow .owl-dots .active span {
    background-color: #fef022 !important;
}
#my-slideshow .owl-dots .owl-dot span:hover {
    background-color: #fef022 !important;
}
#my-slideshow > div, #my-slideshow > div > div, .owl-stage-outer, .owl-stage, .owl-item, .owl-item > div, .owl-item > div > div {
    height: 100% !important;
}
#myslide-1, #myslide-2, #myslide-3 {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    align-content: center;
}
#slider-text-overlay-1, #slider-text-overlay-2, #slider-text-overlay-3 {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    margin: 0px;
    position: absolute;
    top: 0px;
    z-index: 101;
    justify-content: flex-start;
}
#myslide-1 {
    background-image: url(../../../uploads/slide-pool.jpg);
}
#myslide-2 {
    background-image: url(../../../uploads/slide-equipment.jpg);
}
#myslide-3 {
    background-image: url(../../../uploads/slide-projects.jpg);
}
#slider-text-overlay-1 > div, #slider-text-overlay-2 > div, #slider-text-overlay-3 > div {
    text-align: left;
    -webkit-box-shadow: 5px 5px 26px 11px rgba(0,0,0,0.52);
    box-shadow: 5px 5px 26px 11px rgba(0,0,0,0.52);
}
#slider-text-overlay-1, #slider-text-overlay-2, #slider-text-overlay-3 {
    font-family: 'Montserrat';
    height: 100%;
}
#overlay-headline-1, #overlay-headline-1a, #overlay-headline-2, #overlay-headline-3, #overlay-headline-3a {
    background-color: #1b1b1b;
    font-weight: 800;
    font-size: 4rem;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
}
#overlay-maintext-1, #overlay-maintext-2, #overlay-maintext-3 {
    color: #181818;
    font-size: 1.9rem;
    font-weight: 400;
    line-height: 2em;
}
#overlay-maintext-1, #overlay-maintext-2, #overlay-maintext-3, #overlay-maintext-3a {
    font-weight: bold;
    padding: 2%;
}
#my-quick-quote {
    background-color: #575757;
    background-image: url(../images/pavers-pattern.jpg);
    width: 100%;
    grid-area: my-quick-quote;
}
#overlay-headline-1, #overlay-headline-1a, #overlay-headline-2, #overlay-headline-3, #overlay-headline-3a {
    padding: 4%;
}
#overlay-headline-1, #overlay-headline-3 {
    padding-bottom: 0px;
}
#overlay-headline-1a, #overlay-headline-3a {
    color: #fef022;
}
.entry a[href^=tel] {
    color: #000;
}
input[type=submit], .wpcf7-date {
    width: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: block;
    padding: .25em;
}
.footer-phone {
    font-size: 1.4rem;
}
.footer .stretch {
    padding: 0px;
}
.stretch_it {
    white-space: nowrap;
}
#slider-text-overlay-1 .stretch, #slider-text-overlay-2 .stretch, #slider-text-overlay-3 .stretch {
    line-height: 1.75rem;
}
.justify {
    text-align: justify;
}
.owl-prev, .owl-next {
    outline: none;
}
.quote-headline {
    background-color: #fef022;
    padding: .25em;
    width: 100%;
    display: flex;
    justify-content: center;
    font-weight: bold;
}
.quote-headline > div {
    width: max-content;
    margin-left: 1em;
    margin-right: 1em;
}
.arrow {
    position: relative;
    bottom: -.5em;
    width: 1em !important;
    height: 1em !important;
    /**
   * Dark Arrow Down
   */
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI1MTIiIGlkPSJzdmcyIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIiB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzIGlkPSJkZWZzNCIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTU0MC4zNjIyKSI+PHBhdGggZD0ibSAxMjcuNDA2MjUsNjU3Ljc4MTI1IGMgLTQuOTg1MywwLjA3ODQgLTkuOTEwNzcsMi4xNjMwOCAtMTMuNDM3NSw1LjY4NzUgbCAtNTUsNTUgYyAtMy42MDA1NjUsMy41OTkyNyAtNS42OTY4ODMsOC42NTg5NSAtNS42OTY4ODMsMTMuNzUgMCw1LjA5MTA1IDIuMDk2MzE4LDEwLjE1MDczIDUuNjk2ODgzLDEzLjc1IEwgMjQyLjI1LDkyOS4yNSBjIDMuNTk5MjcsMy42MDA1NiA4LjY1ODk1LDUuNjk2ODggMTMuNzUsNS42OTY4OCA1LjA5MTA1LDAgMTAuMTUwNzMsLTIuMDk2MzIgMTMuNzUsLTUuNjk2ODggTCA0NTMuMDMxMjUsNzQ1Ljk2ODc1IGMgMy42MDA1NiwtMy41OTkyNyA1LjY5Njg4LC04LjY1ODk1IDUuNjk2ODgsLTEzLjc1IDAsLTUuMDkxMDUgLTIuMDk2MzIsLTEwLjE1MDczIC01LjY5Njg4LC0xMy43NSBsIC01NSwtNTUgYyAtMy41OTgxNSwtMy41OTEyNyAtOC42NTA2OCwtNS42ODEyNyAtMTMuNzM0MzgsLTUuNjgxMjcgLTUuMDgzNjksMCAtMTAuMTM2MjIsMi4wOSAtMTMuNzM0MzcsNS42ODEyNyBMIDI1Niw3NzguMDMxMjUgMTQxLjQzNzUsNjYzLjQ2ODc1IGMgLTMuNjY2NzgsLTMuNjY0MjMgLTguODQ4MDEsLTUuNzY0NDIgLTE0LjAzMTI1LC01LjY4NzUgeiIgaWQ9InBhdGgzNzY2LTEiIHN0eWxlPSJmb250LXNpemU6bWVkaXVtO2ZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7dGV4dC1pbmRlbnQ6MDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtZGVjb3JhdGlvbjpub25lO2xpbmUtaGVpZ2h0Om5vcm1hbDtsZXR0ZXItc3BhY2luZzpub3JtYWw7d29yZC1zcGFjaW5nOm5vcm1hbDt0ZXh0LXRyYW5zZm9ybTpub25lO2RpcmVjdGlvbjpsdHI7YmxvY2stcHJvZ3Jlc3Npb246dGI7d3JpdGluZy1tb2RlOmxyLXRiO3RleHQtYW5jaG9yOnN0YXJ0O2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2NvbG9yOiMwMDAwMDA7ZmlsbDojMjIyMjIyO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDozOC44ODAwMDEwNzttYXJrZXI6bm9uZTt2aXNpYmlsaXR5OnZpc2libGU7ZGlzcGxheTppbmxpbmU7b3ZlcmZsb3c6dmlzaWJsZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZvbnQtZmFtaWx5OlNhbnM7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zIi8+PC9nPjwvc3ZnPg==);
    background-size: contain;
}
.bounce {
    animation: bounce 2s infinite;
}
input[type=checkbox] {
    -webkit-appearance: checkbox;
    -moz-appearance: checkbox;
    width: auto;
}
input[type=radio] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
    width: auto;
}
input[type=date] {
    display: block;
    -webkit-appearance: textfield;
    -moz-appearance: textfield;
    min-height: 30px;
}
input[type=submit], .wpcf7-date {
    width: auto;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
span.wpcf7-list-item {
    display: block;
    width: 100%;
}
select {
    padding: 8px;
    border: solid;
    border-width: 1px;
    border-color: #555;
    color: #555;
    border-radius: 3px;
}
input[type=submit] {
    transition-duration: .5s;
    font-size: 2em;
    line-height: normal;
    background-color: #000;
    color: #fef022;
}
input[type=submit]:hover {
    background-color: #fef022;
    color: #000;
}
iframe {
    box-sizing: border-box;
}
input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input, textarea {
    border-radius: 3px;
    line-height: 1.5rem;
    border: solid;
    border-width: 1px;
    border-color: #555;
    color: #555;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    margin: 0px;
}
#footer-content {
    color: #FFF;
    width: 100%;
}
a[href^=tel] {
    color: #FFF;
    text-decoration: none;
}
.entry a[href^=tel] {
    color: #000;
}
}
@keyframes bounce {
 0%, 20%, 50%, 80%, 100% {
 transform: translateY(0);
}
 40% {
 transform: translateY(-30px);
}
 60% {
 transform: translateY(-15px);
}
}
