@import url(https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600);
@keyframes fadein {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-moz-keyframes fadein {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes fadein {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-ms-keyframes fadein {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-o-keyframes fadein {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

html {
    visibility: hidden
}

.main-content {
    background-color: #fff!important;
    border-bottom: 1px solid #c8c8c8;
    opacity: 1;
    color: #000;
    background: url(https://www.peterhay.co.nz/wp-content/uploads/2016/02/Handle_less_Living_1.jpg) center bottom fixed
}

@media (max-width:1000px) {
    .main-content {
        background: 0 0
    }
}

.main-content-gallery {
    background-color: #f3f4f6;
    padding-top: 20px
}

body {
    background-color: #f3f4f6!important
}

.gallery-post1 {
    color: #000;
    font-family: Poppins;
    margin: 0 auto!important
}

.gallery-post1:hover {
    text-decoration: none;
    color: #000;
    cursor: pointer
}

.gallery-post1:hover .gallery-post-view-project-button {
    background-color: #9cd026;
    color: #fff;
    -webkit-animation: fadein .5s;
    -moz-animation: fadein .5s;
    -ms-animation: fadein .5s;
    -o-animation: fadein .5s;
    animation: fadein .5s
}

.gallery-post-header {
    text-decoration: none;
    color: #000;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    opacity: .8;
    margin-bottom: 4px
}

.gallery-post-sub-header {
    font-size: 11px;
    font-weight: 300;
    color: #9ea4ae;
    text-transform: uppercase;
    letter-spacing: .5px
}

.gallery-post-description {
    font-size: 9px;
    font-weight: 400;
    opacity: .7
}

.gallery-post-project-cost {
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    color: #3d454d
}

.gallery-post-project-date {
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    color: #3d454d
}

.gallery-post-project-cost-title {
    font-weight: 200;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9ea4ae;
    margin: 0
}

.gallery-post-project-date-title {
    font-weight: 200;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #9ea4ae;
    margin: 0
}

.gallery-post-view-project-button {
    margin: 0 auto;
    padding: 20px;
    margin: 0 -20px;
    transition: .5s;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    font-size: 13px;
    color: #3d454d
}

div.col-6 {
    padding: 0!important
}

.white-card {
    padding: 15px 20px 0 20px;
    box-shadow: 0 0 20px #f3f4f6;
    background-color: #fff
}

.white-card hr {
    margin: 15px -20px 20px -20px!important;
    border-top: 1px solid #fbfbfb;
    border-bottom: 1px solid #f3f4f6
}

#hr-2 {
    margin: 15px -20px 0 -20px!important
}

#request-quote-white-card {
    margin-top: 25px
}

#request-quote-btn {
    background-color: #9cd026;
    color: #fff;
    border-radius: 3px;
    font-family: Poppins;
    letter-spacing: 1px;
    font-size: 12px;
    padding-top: 10px!important;
    padding-bottom: 10px!important;
    border: none;
    outline: 0;
    box-shadow: none;
    margin-bottom: 20px;
    cursor: pointer;
    border: 1px solid #9cd026
}

#request-quote-btn:hover {
    background-color: #fff;
    border: 1px solid #9cd026;
    color: #9cd026;
    transition: all .5s ease-out
}

.request-quote-header {
    font-family: Poppins;
    font-weight: 300;
    font-size: 15px
}

.request-quote-phone-num-title {
    color: #9ea4ae;
    text-transform: uppercase;
    font-weight: 200;
    font-size: 14px;
    margin-bottom: 5px
}

.request-quote-phone-num {
    color: #3d454d;
    font-weight: 300;
    font-size: 14px;
    margin-bottom: 10px
}

.request-quote-phone-address-title {
    color: #9ea4ae;
    text-transform: uppercase;
    font-weight: 200;
    font-size: 14px;
    margin-bottom: 5px
}

.request-quote-phone-address {
    color: #3d454d;
    font-weight: 300;
    font-size: 14px;
    margin-bottom: 10px
}

#read-more {
    color: #4282e2
}

@media (max-width:530px) {
    div.col-12.col-lg-9.row {
        margin: 0 auto!important
    }
}

#line1 {
    padding: 15px;
    color: #2d2d2d
}

#arrow-down {
    font-size: 50px;
    padding-bottom: 30px;
    background: linear-gradient(135deg, #9ff669 0%, #31de79 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    -webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
    animation-delay: 3s;
    opacity: 0;
    animation-fill-mode: forwards;
    text-shadow: #31de79 1px 1px
}

#arrow-down:hover {
    cursor: pointer
}

#word1 {
    -webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
    opacity: 0
}

#word2 {
    -webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    opacity: 0
}

#changeText {
    color: #9cd026;
    -webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0
}

#changeTextFull {
    background: linear-gradient(135deg, #9ff669 0%, #31de79 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    text-shadow: #31de79 2px 2px
}

#word3 {
    -webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
    opacity: 0
}

#word4 {
    -webkit-animation: fadein 2s;
    -moz-animation: fadein 2s;
    -ms-animation: fadein 2s;
    -o-animation: fadein 2s;
    animation: fadein 2s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    opacity: 0
}

.fixed-top {
    left: auto!important;
    top: 20px!important;
    width: 255px!important
}

.fixed {
    position: fixed;
    top: 20px!important;
    right: 0!important
}

i.fa-bars {
    font-size: 27px
}

.gallery {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-width: 33%;
    -moz-column-width: 33%;
    column-width: 33%
}

.gallery .pics {
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease
}

.gallery .animation {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1)
}

.btn[class*=btn-outline-] {
    padding-top: .7rem;
    padding-bottom: .7rem
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer
}

[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

.btn-outline-black {
    border: 2px solid #000!important;
    background-color: transparent!important;
    color: #000!important
}

.btn {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
    padding: .84rem 2.14rem;
    font-size: .81rem;
    -webkit-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    -o-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, -webkit-box-shadow .15s ease-in-out;
    margin: .375rem;
    border: 0;
    -webkit-border-radius: .125rem;
    border-radius: .125rem;
    cursor: pointer;
    text-transform: uppercase;
    white-space: normal;
    word-wrap: break-word;
    color: inherit
}

.btn-outline-black.active, .btn-outline-black:active, .btn-outline-black:active:focus, .btn-outline-black:focus, .btn-outline-black:hover {
    border-color: #000!important;
    background-color: transparent!important;
    color: #000!important
}

.btn[class*=btn-outline-] {
    padding-top: .7rem;
    padding-bottom: .7rem
}

.btn:active, .btn:focus, .btn:hover {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
    outline: 0
}

.btn:hover {
    color: #212529;
    text-decoration: none
}

.btn-outline-black:not([disabled]):not(.disabled).active:focus, .btn-outline-black:not([disabled]):not(.disabled):active:focus, .show>.btn-outline-black.dropdown-toggle:focus {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15)
}

.btn-outline-black:not([disabled]):not(.disabled).active, .btn-outline-black:not([disabled]):not(.disabled):active, .show>.btn-outline-black.dropdown-toggle {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
    background-color: transparent!important;
    border-color: #000!important
}

.btn:not([disabled]):not(.disabled).active, .btn:not([disabled]):not(.disabled):active {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15);
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, .18), 0 4px 15px 0 rgba(0, 0, 0, .15)
}

.btn-outline-black.active, .btn-outline-black:active, .btn-outline-black:active:focus, .btn-outline-black:focus, .btn-outline-black:hover {
    border-color: #000!important;
    background-color: transparent!important;
    color: #000!important
}

@media (max-width:450px) {
    .gallery {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-width: 100%;
        -moz-column-width: 100%;
        column-width: 100%
    }
}

@media (max-width:400px) {
    .btn.filter {
        padding-left: 1.1rem;
        padding-right: 1.1rem
    }
}