ul/* This MIT License pertains ONLY to the Ionicons icons used on the website html pages. This license does not pertain to the custom and theme related parts of the website.

The MIT License (MIT)

Copyright (c) 2015-present Ionic (http://ionic.io/)

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

*/

/* This MIT License pertains ONLY to the tether library used on the website html pages. This license does not pertain to the custom and theme related parts of the website.

Copyright (c) 2014-2019 HubSpot, Inc.
Copyright (c) 2019-2022 Ship Shape Consulting LLC

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

*/

/* This MIT License pertains ONLY to the lightbox2 used on the website html pages. This license does not pertain to the custom and theme related parts of the website.

The MIT License (MIT)

Copyright (c) 2015 Lokesh Dhakar

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

*/

/*  This License pertains ONLY to the jquery easing plugin used on the website html pages. This license does not pertain to the custom and theme related parts of the website.

jQuery Easing - http://gsgd.co.uk/sandbox/jquery/easing/

Uses the built in easing capabilities added In jQuery 1.1
to offer multiple easing options

TERMS OF USE - jQuery Easing

Open source under the 3-Clause BSD License.

Copyright © 2008 George McGinley Smith
All rights reserved.

Redistribution and use in source and binary forms, with or without modification, 
are permitted provided that the following conditions are met:

Redistributions of source code must retain the above copyright notice, this list of 
conditions and the following disclaimer. 

Redistributions in binary form must reproduce the above copyright notice, this list 
of conditions and the following disclaimer in the documentation and/or other 
materials provided with the distribution. Neither the name of the author nor the 
names of contributors may be used to endorse or promote products derived from this 
software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. 
IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, 
INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT 
NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR 
PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 
WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE 
POSSIBILITY OF SUCH DAMAGE.



TERMS OF USE - EASING EQUATIONS
Open source under the MIT License and the 3-Clause BSD License.

MIT License
Copyright © 2001 Robert Penner

Permission is hereby granted, free of charge, to any person obtaining a copy of this 
software and associated documentation files (the "Software"), to deal in the Software 
without restriction, including without limitation the rights to use, copy, modify, 
merge, publish, distribute, sublicense, and/or sell copies of the Software, and to 
permit persons to whom the Software is furnished to do so, subject to the 
following conditions:

The above copyright notice and this permission notice shall be included in all copies 
or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, 
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A 
PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT 
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF 
CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE 
OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

BSD License
Copyright © 2001 Robert Penner

Redistribution and use in source and binary forms, with or without modification, 
are permitted provided that the following conditions are met:

Redistributions of source code must retain the above copyright notice, this list of 
conditions and the following disclaimer. 

Redistributions in binary form must reproduce the above copyright notice, this list 
of conditions and the following disclaimer in the documentation and/or other 
materials provided with the distribution. Neither the name of the author nor the 
names of contributors may be used to endorse or promote products derived from this 
software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. 
IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, 
INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT 
NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR 
PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, 
WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) 
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE 
POSSIBILITY OF SUCH DAMAGE.

*/

/*
Lightbox gallery inspiration

Copyright (c) 2024 by Patricia (https://codepen.io/PatriciaVA/pen/poPxLgE)
Fork of an original work Responsive Image Gallery with jQuery Lightbox (https://codepen.io/mmgolden/pen/YrGddm

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

*/

/*
Lightbox gallery inspiration

Copyright (c) 2024 by Melinda Golden (https://codepen.io/mmgolden/pen/YrGddm)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

*/

/*

The MIT License (MIT)

Copyright (c) 2011-2018 Twitter, Inc.
Copyright (c) 2011-2018 The Bootstrap Authors

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

*/


/*!
 * Font Awesome Free 5.2.0 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */


/*@import url('https://fonts.googleapis.com/css?family=Rubik:400,500,700');*/
/*@import url('https://fonts.googleapis.com/css?family=Saira');*/


html,
body {
    width: 100%;
    height: 100%;
    font-family: 'Saira', sans-serif;

}

body {
    height: 100%!important;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    background-color: rgb(223, 223, 223);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    font-family: 'Saira', sans-serif;

}

h3 {
    color: rgb(46, 46, 46) !important;
    font-size: 20px;
    font-weight: 500;
    margin-top: -5% !important;
    margin-left: -10px !important;
    font-family: 'Saira', sans-serif;

}

h4 {
    color: rgb(46, 46, 46) !important;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    margin-top: -5% !important;
    margin-left: -10px !important;
    font-family: 'Saira', sans-serif;

}


#bold-title{
    font-weight:900;
}

b,
strong {
    font-weight: 500;
}

hr.sections {
    width: 1px solid grey;
}

hr {
    height: 1px;
    color: #9c9c9c;
    background: #9c9c9c;
    font-size: 0;
    border: 0;
    width: 80px;
}

#navbar {
    z-index: 800;
    font-family: 'Saira', sans-serif;
}

#navbar #navbar-inner {
    width: 1600px;
    max-width: 100%;
    margin: 0 auto;
}

#navbar .top-section {
    height: 96px;
    font-family: 'Saira', sans-serif;
}

#navbar .bottom-section {
    padding-top: 5px !important;
    height: 30px;
}

@media (max-width: 481px) {
    #navbar .bottom-section {
        padding-top: 1px !important;
        height: 30px;
    }
}


#navbar.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

#navbar.is-minimized {
    transform: translateY(- 75px);
}

#navbar.is-maximized {
    transform: translateY(0);
}

#navbar .top-section,
#navbar .bottom-section {
    position: relative;
    font-family: sans-serif;
}

.top-section {
    background-color: #aaaaaa;
    color: rgb(51, 51, 51);
    padding: 1% !important;
}

.top-section:hover {
    color: rgb(92, 91, 91);
}


@media (max-width: 481px) {
    .nonmobileicons {
        display: none !important;
    }
}


@media (min-width: 481px) {
    .mobileicons {
        display: none !important;
    }
}


@media (min-width: 361px) and (max-width: 480px) {
    .mobileicons {
        float: right !important;
        color: rgb(226, 223, 223) !important;
        font-size: 26px !important;
        margin-top: -2px !important;
        z-index: 999999999999999999;
    }
}


/*add media query for 300px - 350px*/
@media (min-width: 300px) and (max-width: 360px) {
    .mobileicons {
        float: right !important;
        color: rgb(226, 223, 223) !important;
        font-size: 24px !important;
        margin-top: -1px !important;
        z-index: 999999999999999999;
    }
}

.bottom-section {
    position: relative;
    min-height: 45px;
    width: 100%;
    background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
    transition: 0.3s ease-in-out;
    align-items: left !important;
    justify-content: left !important;
    font-family: 'Saira', sans-serif;


}


/*li:hover {*/
/*    color: #818181 !important;*/
/*}*/

@media only screen and (min-width: 799px) {
.top-section #logo {
    float: left;
}
}

@media only screen and (max-width: 798px) {
    .top-section #logo {
        position: absolute;
        left: 18%;
    }
}

#logo {
    width: 100%;
    max-width: 250px;
}

.top-section #firstnavitems {
    float: right !important;
    align-content: right !important;
    justify-content: right !important;
    padding: 16px !important;
    font-size: 15px;
    font-family: 'Saira', sans-serif;

 }
 .top-section #firstnavitems a{
    color: rgb(51, 51, 51) !important;

 }

 @media (max-width: 480px) {
     .license {
     display: block;
     margin: 0 auto!important;
     padding-top: 50px!important;
     padding-right: 50px!important;
     width: 300px;
     text-align: center!important;
 }
 }
 
 @media (min-width: 481px) {
 .license {
     margin-top: 5px!important;
     float: right;
 }
 }

 @media (min-width: 481px) { 
    navbar ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }


    .nav {
        display: table;
        width: 100%;
        text-align: left !important;
        word-spacing: -9em;
        padding: 0% 2% !important;
    }


    .nav li {
        font-size: 15px;
        font-weight: 700;
        color: whitesmoke;
        position: relative;
        display: inline-block;
        z-index: 99;
        text-align: left;
        word-spacing: normal;
        padding-right: 2% !important;
        text-decoration: none !important;


    }

    .nav li>a {
        position: relative;
        text-decoration: none !important;

    }

    .nav li li {
        display: block;
        text-decoration: none !important;
color: whitesmoke!important;
    }

    .nav a {
        display: block;
        padding: 7px 10px;
        background: transparent;
        color: whitesmoke!important;
        text-decoration: none !important;
        white-space: nowrap;
        position: relative;
        color: whitesmoke!important;
    }

    .nav li:hover>a,
    .nav a:hover {
        background: transparent;
        text-decoration: none !important;
        color: whitesmoke!important;
    }

    .nav ul {
        text-decoration: none !important;
        position: absolute;
        z-index: 104;
        left: -999em;
        top: -1px;
        opacity: 0;
        transition: opacity .5s, left 0s .5s, top .5s;
        border-radius: 9px !important;
        color: whitesmoke!important;
    }

    .nav li:hover>ul {
        text-decoration: none !important;
        left: 0;
        top: 100%;
        opacity: 1;
        transition: opacity .5s linear, top .5s;
        background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
    }

    .nav ul ul {
        text-decoration: none !important;
        transition: opacity .4s, left 0s .4s, margin 0s .4s;
        z-index: 103;
    }

    .nav li li:hover ul {
        text-decoration: none !important;
        top: -1px;
        margin-left: 100%;
        opacity: 1;
        transition: opacity .5s linear, margin .5s;
        background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
    }

    .nav li a:first-child:not(:last-child) {
        padding-right: 20px;
        /* make space for arrows*/
    }

    .nav li a:first-child:not(:last-child):after {
        text-decoration: none !important;
        content: "";
        position: absolute;
        right: 3px;
        top: 50%;
        margin-top: -6px;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 6px solid whitesmoke;
    }

    .nav>li>a:first-child:not(:last-child):after {
        text-decoration: none !important;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid whitesmoke;
        border-bottom: none;
        margin-top: -3px;
    }

    .nav li:hover a:first-child:not(:last-child):after {
        border-left-color: #fff
    }

    .nav>li:hover>a:first-child:not(:last-child):after {
        border-left-color: transparent;
        border-top-color: #fff
    }

    /* allow touch to play */
    .nav .touch-only {
        display: none;
        left: -10px
    }

    .touch-device .nav .touch-only {
        display: inline-block
    }

    .touch-device .nav .touch-only a {
        background: transparent;
        color: #fff;
    }

}


/*
ul#horizontal-list:hover {
    margin-bottom: 4px!important;
    color: rgb(160, 160, 160)!important;

}

ul#horizontal-list li:hover {
    display: inline;
    padding-right: 6%!important;
    font-size: 15px;
    font-weight: 700;
    color: rgb(160, 160, 160)1important;
}
*/

@media (min-width: 361px) and (max-width: 480px) {


    /* .table {
        display: table;
        margin: 0 auto;
    }
    
    ul#horizontal-list {
        margin-top: 5px!important;
    }
    
    ul#horizontal-list li {
        display: inline;
        padding-right: 4%!important;
        font-size: 14px!important;
        font-weight: 700;
        color: whitesmoke;
    }
*/
    #mcontact {
        display: none !important;
    }


    /*projects dropdown*/
    navbar ul {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none !important;

    }


    .nav {
        display: table;
        width: 100%;
        text-align: center;
        word-spacing: -9em;
        text-decoration: none !important;

    }

    .nav li {
        font-size: 15px;
        font-weight: 700;
        color: whitesmoke!important;
        position: relative;
        display: inline-block;
        z-index: 99;
        text-align: left;
        word-spacing: normal;
        text-decoration: none !important;

    }

    .nav li>a {
        position: relative;
        text-decoration: none !important;
color: whitesmoke!important;
    }

    /*
.nav li:hover,.nav > li > a:hover {z-index:105;}
*/

    .nav li li {
        display: block;
        text-decoration: none !important;

    }

    .nav a {
        display: block;
        padding: 7px 10px;
        background: transparent;
        color: #fff;
        text-decoration: none !important;
        white-space: nowrap;
        position: relative;
        color: whitesmoke!important;
    }

    .nav li:hover>a,
    .nav a:hover {
        color: #fff !important;
        /*background:transparent;*/
        background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        text-decoration: none !important;

    }

    .nav ul {
        position: absolute;
        z-index: 104;
        left: -999em;
        top: 0;
        opacity: 0;
        transition: opacity .5s, left 0s .5s, top .5s;
        text-decoration: none !important;
color: whitesmoke!important;
    }

    .nav li:hover>ul {
        left: 0;
        top: 100%;
        opacity: 1;
        transition: opacity .5s linear, top .3s;
        background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        text-decoration: none !important;

    }

    .nav ul ul {
        transition: opacity .4s, left 0s .4s, margin 0s .4s;
        z-index: 103;
        text-decoration: none !important;

    }

    .nav li li:hover ul {
        color: #fff !important;
        top: 0;
        margin-left: 100%;
        opacity: 1;
        transition: opacity .5s linear, margin .5s;
        background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        text-decoration: none !important;

    }

}


/*add media query for 300px - 350px*/
@media (min-width: 300px) and (max-width: 360px) {
    .table {
        display: table;
        /* Allow the centering to work */
        margin: 0 auto;
    }

    ul#horizontal-list {
        /*min-width: 696px;*/
        /* list-style: none;*/
        margin-top: -2px !important;
    }

    ul#horizontal-list li {
        display: inline;
        padding-right: 5% !important;
        font-size: 15px;
        font-weight: 700;
        color: whitesmoke;
    }

    #mcontact {
        display: none !important;
    }



    /*projects dropdown*/
    navbar ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }


    .nav {
        display: table;
        width: 100%;
        text-align: center;
        word-spacing: -9em;
    }


    .nav li {
        font-size: 15px;
        font-weight: 700;
        color: whitesmoke;
        position: relative;
        display: inline-block;
        z-index: 99;
        text-align: left;
        word-spacing: normal;
        /*white-space fix*/
        color: whitesmoke!important;
    }

    .nav li>a {
        position: relative;
    }

    /*
.nav li:hover,.nav > li > a:hover {z-index:105;}
*/

    .nav li li {
        display: block
    }

    .nav a {
        display: block;
        padding: 7px 10px;
        background: transparent;
        color: #fff;
        text-decoration: none;
        white-space: nowrap;
        position: relative;
        color: whitesmoke!important;
    }

    .nav li:hover>a,
    .nav a:hover {
        background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        color: whitesmoke!important;
    }

    .nav ul {
        position: absolute;
        z-index: 104;
        left: -999em;
        top: 0;
        opacity: 0;
        transition: opacity .5s, left 0s .5s, top .5s;
    }

    .nav li:hover>ul {
        left: 0;
        top: 100%;
        opacity: 1;
        transition: opacity .5s linear, top .5s;
        background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
    }

    .nav ul ul {
        transition: opacity .4s, left 0s .4s, margin 0s .4s;
        z-index: 103;
    }

    .nav li li:hover ul {
        top: 0;
        margin-left: 100%;
        opacity: 1;
        transition: opacity .5s linear, margin .5s;
        background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
    }

    /* arrows */
    .nav li a:first-child:not(:last-child) {
        padding-right: 20px;
    }

    .nav li a:first-child:not(:last-child):after {
        content: "";
        position: absolute;
        right: 3px;
        top: 50%;
        margin-top: -6px;
        width: 0;
        height: 0;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-left: 6px solid whitesmoke;
    }

    .nav>li>a:first-child:not(:last-child):after {
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid whitesmoke;
        border-bottom: none;
        margin-top: -3px;
    }

    .nav li:hover a:first-child:not(:last-child):after {
        border-left-color: #fff
    }

    .nav>li:hover>a:first-child:not(:last-child):after {
        border-left-color: transparent;
        border-top-color: #fff
    }

    .nav .touch-only {
        display: none;
        left: -10px
    }

    .touch-device .nav .touch-only {
        display: inline-block
    }

    .touch-device .nav .touch-only a {
        background: #000;
        color: #fff;
    }

}
























/*testing mobile only nav*/
.navigation {
    height: 40px;
    background: #262626;
}

.nav-container .brand {
    position: absolute;
    padding-left: 20px;
    float: left;
    line-height: 40px;
    text-transform: uppercase;
    font-size: 1.4em;
}

.nav-container .brand a,
.nav-container .brand a:visited {
    color: #fff;
    text-decoration: none;
}

.nav-container nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-container nav ul li {
    float: left;
    position: relative;
}
.nav-container nav ul li a,
.nav-container nav ul li a:visited {
    display: block;
    padding: 0 20px;
    line-height: 40px;
    transition: opacity .5s linear, top .5s;
   
    color: #fff;
    text-decoration: none;
}

.nav-container nav ul li a:hover,
.nav-container nav ul li a:visited:hover {
    background: transparent;
    color: rgb(221, 221, 221)!important;
}

.nav-container nav ul li a:not(:only-child):after,
.nav-container nav ul li a:visited:not(:only-child):after {
    padding-left: 4px;
    /*content: url("img/icons/chevron-down-outline.svg");*/
}

.nav-container nav ul li ul li {
    min-width: 190px;
}

.nav-container nav ul li ul li a {
    padding: 15px;
    line-height: 20px;
}

.nav-container .nav-dropdown {
    position: absolute;
    display: none;
    z-index: 1;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
    background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        color: whitesmoke!important;
}

.nav-dropdown a {
    color: whitesmoke!important;
}

/* Mobile navigation */
.nav-container .nav-mobile {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;    
    height: 40px;
    width: 70px;
}

@media only screen and (max-width: 798px) {
    .nav-list {
        margin-top: -7%!important;
        background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
    }

    .nav-container {
        max-width: 1000px;
        margin: 0 auto;
        color: whitesmoke;
        font-weight: 700;
        font-size: 15px;
        font-family: 'Saira', sans-serif;

    }
    
    .nav-container .nav-mobile {
        display: block;
    }

    .nav-container nav {
        width: 100%;
        padding: 70px 0 15px;
    }

    .nav-container nav ul {
        display: none;
    }

    .nav-container nav ul li {
        float: none;
    }

    .nav-container nav ul li a {
        padding: 15px;
        line-height: 20px;
    }

    .nav-container nav ul li ul li a {
        padding-left: 30px;
    }

    .nav-container .nav-dropdown {
        position: fixed;
    }
}

@media screen and (min-width: 799px) {
    .nav-list {
        display: block !important;
    }

    .nav-container {
        max-width: 1000px;
        margin: 0 auto;
        float: left!important;
        color: whitesmoke;
        font-weight: 700;
        font-size: 15px;
        font-family: 'Saira', sans-serif;

    }
}

#nav-toggle {
    position: absolute;
    left: 18px;
    top: 10px;
    cursor: pointer;
    padding: 10px 35px 16px 0px;
}

#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #fff;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
}

#nav-toggle span:before {
    top: -10px;
}

#nav-toggle span:after {
    bottom: -10px;
}

#nav-toggle.active span {
    background-color: transparent;
}

#nav-toggle.active span:before,
#nav-toggle.active span:after {
    top: 0;
}

#nav-toggle.active span:before {
    transform: rotate(45deg);
}

#nav-toggle.active span:after {
    transform: rotate(-45deg);
}





























/* gradient animation*/

.bottom-section {

    width: 100%;
    background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
}

@-webkit-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@-moz-keyframes Gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}

@keyframes Gradient {
    0% {
        background-position: 0% 50%
    }

    50% {
        background-position: 100% 50%
    }

    100% {
        background-position: 0% 50%
    }
}



/* scroll arrow*/
@media (max-width: 480px) {
    .scroll-down {
        position: absolute;
        left: 48% !important;
        bottom: 18% !important;
        display: block;
        text-align: center;
        font-size: 30px;
        z-index: 100;
        text-decoration: none;
        text-shadow: 0;
        width: 30px;
        height: 30px;
        border-bottom: 5px solid rgb(226, 226, 226);
        border-right: 5px solid rgb(226, 226, 226);
        -webkit-transform: translate(-50%, 0%) rotate(45deg);
        -moz-transform: translate(-50%, 0%) rotate(45deg);
        transform: translate(-50%, 0%) rotate(45deg);
        -webkit-animation: fade_move_down 4s ease-in-out infinite;
        -moz-animation: fade_move_down 4s ease-in-out infinite;
        animation: fade_move_down 4s ease-in-out infinite;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .scroll-down {
        position: absolute;
        left: 48% !important;
        bottom: -30px !important;
        display: block;
        text-align: center;
        font-size: 20px;
        z-index: 100;
        text-decoration: none;
        text-shadow: 0;
        width: 30px;
        height: 30px;
        border-bottom: 5px solid rgb(226, 226, 226);
        border-right: 5px solid rgb(226, 226, 226);
        z-index: 9;
        -webkit-transform: translate(-50%, 0%) rotate(45deg);
        -moz-transform: translate(-50%, 0%) rotate(45deg);
        transform: translate(-50%, 0%) rotate(45deg);
        -webkit-animation: fade_move_down 4s ease-in-out infinite;
        -moz-animation: fade_move_down 4s ease-in-out infinite;
        animation: fade_move_down 4s ease-in-out infinite;
    }
}





.scroll-down {
    position: absolute;
    left: 50%;
    bottom: 22%;
    display: block;
    text-align: center;
    font-size: 30px;
    z-index: 100;
    text-decoration: none;
    text-shadow: 0;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid rgb(226, 226, 226);
    border-right: 5px solid rgb(226, 226, 226);
    -webkit-transform: translate(-50%, 0%) rotate(45deg);
    -moz-transform: translate(-50%, 0%) rotate(45deg);
    transform: translate(-50%, 0%) rotate(45deg);
    -webkit-animation: fade_move_down 4s ease-in-out infinite;
    -moz-animation: fade_move_down 4s ease-in-out infinite;
    animation: fade_move_down 4s ease-in-out infinite;
}

/*animated scroll arrow animation*/
@-webkit-keyframes fade_move_down {
    0% {
        -webkit-transform: translate(0, -10px) rotate(45deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -webkit-transform: translate(0, 10px) rotate(45deg);
        opacity: 0;
    }
}

@-moz-keyframes fade_move_down {
    0% {
        -moz-transform: translate(0, -10px) rotate(45deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        -moz-transform: translate(0, 10px) rotate(45deg);
        opacity: 0;
    }
}

@keyframes fade_move_down {
    0% {
        transform: translate(0, -10px) rotate(45deg);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translate(0, 10px) rotate(45deg);
        opacity: 0;
    }
}




#main {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/guess-hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
    font-family: 'Saira', sans-serif;

}

#main {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
        font-family: 'Saira', sans-serif;

}


#mainres {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
    font-family: 'Saira', sans-serif;

}

#mainres {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}




/*81 bay brew co*/

#mainbay {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/commercial/81bay-brew-co/81bay-hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainbay {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*central art gallery*/

#mainart {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/commercial/central-ave-art-gallery/central-hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainart {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}

/*Ice Hockey Arena*/
#mainice {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/commercial/florida-hospital-center-ice-hockey-arena/mainhockey.png');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainice {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*guess*/
#mainguess {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/commercial/guess-department-store/guess-hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainguess {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*guess*/
#mainisland {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/commercial/island-court-seafood/island-count-seafood-hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainisland {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}

/*winn-dixie*/
#maindixie {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/commercial/winn-dixie/winn-dixie-hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#maindixie {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}

/*pearl*/
#mainpearl {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/commercial/placida-pearl/pearl-hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#maindpearl {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*soho*/
#mainsoho {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/commercial/soho-saloon/soho-hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#maindsoho {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}

/*lobsters*/
#mainlobsters {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/commercial/twin-lobsters/lobsters-hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#maindlobsters {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}

/*lobsters*/
#mainjoin {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/commercial/joiner-architecture-firm/joiner-hero.png');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#maindjoin {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*Backyard Patio*/
#mainpatio {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/backyard-patio/backyard-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#maindpatio {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*Driveway*/
#maindriveway {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/driveway/drive-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainddriveway {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*Riverview*/
#mainriverview {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/riverview-florida-countertop/riverview-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainriverview {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*Riverview*/
#mainenglewood {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/englewood-florida-floors/englewood-floors-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainenglewood {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}

/*Pool Deck*/
#mainpool {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/pool-deck/pool-deck-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainpool {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*Rotunda Counter*/
#mainrotunda {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/rotonda-florida-countertop/rotunda-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainrotunda {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*Patio*/
#mainpatioo {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/patio/green-patio-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainpatioo {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}



/*Valrico*/
#mainvalrico {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/valrico-brandon-fl-countertop/valrico-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainvalrico {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*Brandon Floora*/
#mainbrandon {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/brandon-florida-floors/after/brandon-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainbrandon {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*Countertops*/
#maincounter {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/riverview-florida-countertop/riverview-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#maincounter {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}




/*Floors*/
#mainfloors {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/brandon-florida-floors/after/brandon-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainfloors {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}




/*Floors*/
#mainpatios {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/backyard-patio/backyard-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainpatios {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*Driveway*/
#maindrivee {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/driveway/drive-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#maindrivee {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}


/*Pool Decks*/
#mainpooldecks {
    height: 80vh;
    min-height: 500px;
    padding: 100px 0;
    background-image: url('../img/residential/pool-deck/pool-deck-hero.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75) !important;
}

#mainpooldecks {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23) !important;
}






#main .gradient-overlay {
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    height: 80vh;
    min-height: 500px;
    z-index: 15;
}


#hero .brand {
    margin-top: 100px;

}

@media (max-width: 768px) {
    #hero .brand {
        margin-top: 0px;

    }
}

.aboutparagraph a{
    color: #3f3f3f !important;
    font-family: 'Saira', sans-serif;
    text-decoration: underline!important;
}

@media (max-width: 480px) {
    .aboutparagraph {
        width: 100%;
        max-width: 330px;
        padding: 2px;
        text-align: left;
        margin: 0 auto;
        font-family: 'Saira', sans-serif;
        color: #3f3f3f !important;

    }

    .aboutparagraph a{
        color: #3f3f3f !important;
        font-family: 'Saira', sans-serif;
        text-decoration: underline!important;
    }
}

/* Landscape phone to portrait tablet */

@media (min-width: 481px) and (max-width: 767px) {
    .aboutparagraph {
        width: 100%;
        max-width: 600px;
        text-align: left;
        margin: 0 auto;
        font-family: 'Saira', sans-serif;
        color: #3f3f3f !important;
    }

    .aboutparagraph a{
        color: #3f3f3f !important;
        font-family: 'Saira', sans-serif;
        text-decoration: underline!important;
    }
}

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 991px) {
    .aboutparagraph {
        width: 100%;
        max-width: 800px;
        text-align: left;
        margin: 0 auto;
        font-family: 'Saira', sans-serif;
        color: #3f3f3f !important;
    }

    .aboutparagraph a{
        color: #3f3f3f !important;
        font-family: 'Saira', sans-serif;
        text-decoration: underline!important;
    }
}

/* Desktops and laptops ----------- */

@media (min-width: 992px) and (max-width: 1199px) {
    .aboutparagraph {
        width: 100%;
        max-width: 890px;
        text-align: left;
        margin: 0 auto;
        font-family: 'Saira', sans-serif;
        color: #3f3f3f !important;
    }

    .aboutparagraph a{
        color: #3f3f3f !important;
        font-family: 'Saira', sans-serif;
        text-decoration: underline!important;
    }
}

/* Large screens ----------- */

@media (min-width: 1200px) and (max-width: 3000px) {
    .aboutparagraph {
        width: 100%;
        max-width: 1000px;
        text-align: left;
        margin: 0 auto;
        font-family: 'Saira', sans-serif;
        color: #3f3f3f !important;
    }

    .aboutparagraph a{
        color: #3f3f3f !important;
        font-family: 'Saira', sans-serif;
        text-decoration: underline!important;
    }
}





.servicename {
    padding: 2px;
    font-size: 25px;
    font-weight: 700;
    color: #37474F;
    font-family: 'Saira', sans-serif;

}












.store-img {
    width: 170px;
}

.hero h1 {
    font-weight: 100;
    font-family: 'Saira', sans-serif;

}

.hero h1 b {
    font-weight: 700;
    font-family: 'Saira', sans-serif;

}

a {
    color: inherit;
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
    font-family: 'Saira', sans-serif;

}

a:hover,
a:focus {
    color: whitesmoke !important;
    outline: 0;
    text-decoration: none !important;
    font-family: 'Saira', sans-serif;

}

section {
    padding: 80px 0px;

}

.img-team {
    width: 150px;
    box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.15);
    -webkit-transition: 350ms ease all;
    transition: 350ms ease all;
}

.img-team:hover {
    box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15);
}

.team h5 {
    padding: 35px 0 15px 0;
    font-weight: 500;
}

.team p {
    color: #999;
}

.card-outline-primary {
    border: solid 1px#007bb6;
}

.small-xl {
    font-size: 90%;
}

.small-xs {
    font-size: 70%;
}

/*===============================================
* Background Colors
================================================*/


.bg-texture {
    /*
    background: transparent -webkit-radial-gradient(circle farthest-side at right bottom, #ec407a 5%, #e91e63 25%, #d81b60 80%, #c2185b 98%) repeat scroll 0% 0%;
    background: transparent -o-radial-gradient(circle farthest-side at right bottom, #ec407a 5%, #e91e63 25%, #d81b60 80%, #c2185b 98%) repeat scroll 0% 0%;
    background: transparent -moz-radial-gradient(circle farthest-side at right bottom, #ec407a 5%, #e91e63 25%, #d81b60 80%, #c2185b 98%) repeat scroll 0% 0%;
    background: transparent radial-gradient(circle farthest-side at right bottom, #ec407a 5%, #e91e63 25%, #d81b60 80%, #c2185b 98%) repeat scroll 0% 0%;*/


}


.bg-texture-collage {
    background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
    height: 40px !important;
    width: 100%;
    border: 0px !important;
}

@media (max-width: 480px) {
    .bg-texture-collage {
        background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        height: 105px !important;
        width: 100%;
        border: 0px !important;
        padding: 1%;
    }
}


.bg-alt {
    margin-top: -10%;
    background-color: #fff;
}

@media (max-width: 480px) {
    .bg-alt {
        margin-top: -22%;
        background-color: #fff;
    }
}

.bg-faded {
    background-color: rgb(223, 223, 223);
}

.bg-footer {
    background-color: #b4b4b4 !important;
    color: whitesmoke !important;
    max-height: 150pximportant;
    font-family: 'Saira', sans-serif;



}

.bg-faded2 {
    background-color: rgba(231, 242, 255, 0.616);
}


@media (max-width: 480px) {
    #bg-faded-mobile1 {
        text-align: left;
    }
}


/* Landscape phones and down */

@media (max-width: 480px) {
    .box-transparent {
        position: relative;
        margin: 1% !important;
        background-color: transparent;
        padding: 6rem 1rem;
        width: 100%;
        max-width: 100%;
        height: 400px;
        z-index: 1;
        color: whitesmoke;
        font-size: 24px !important;
        font-weight: 700;
        text-align: center;
        font-family: 'Saira', sans-serif;

    }

    .box-transparent p {
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        font-family: 'Saira', sans-serif;

    }

    hr.side {
        border: solid #ddd;
        border-width: 2px 0 0;
        clear: both;
        margin: 22px 0 21px;
        height: 0;
        width: 100%;
    }
}

/* Landscape phone to portrait tablet */

@media (min-width: 481px) and (max-width: 767px) {
    .box-transparent {
        position: relative;
        margin: 15% auto !important;
        background-color: transparent;
        padding: 1px 1rem;
        width: 100%;
        max-width: 100%;
        height: 400px;
        z-index: 1;
        color: whitesmoke;
        font-size: 20px !important;
        font-weight: 700;
        text-align: center;
        font-family: 'Saira', sans-serif;

    }

    .box-transparent p {
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        font-family: 'Saira', sans-serif;

    }

    hr.side {
        border: solid #ddd;
        border-width: 2px 0 0;
        clear: both;
        margin: 22px 0 21px;
        height: 0;
        width: 100%;
    }
}

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 991px) {
    .box-transparent {
        position: relative;
        margin: 15% auto !important;
        background-color: transparent;
        padding: 8rem 3rem;
        width: 100%;
        max-width: 100%;
        height: 400px;
        z-index: 1;
        color: whitesmoke;
        font-size: 36px !important;
        font-weight: 700;
        text-align: center;
        font-family: 'Saira', sans-serif;

    }

    .box-transparent p {
        font-size: 20px;
        font-weight: 700;
        text-align: center;
        font-family: 'Saira', sans-serif;

    }

    hr.side {
        border: solid #ddd;
        border-width: 2px 0 0;
        clear: both;
        margin: 22px 0 21px;
        height: 0;
        width: 100%;
    }
}

/* Desktops and laptops ----------- */

@media (min-width: 992px) and (max-width: 1199px) {
    .box-transparent {
        position: relative;
        margin: 15% auto !important;
        background-color: transparent;
        padding: 1rem 3rem;
        width: 100%;
        max-width: 100%;
        height: 400px;
        z-index: 1;
        color: whitesmoke;
        font-size: 36px !important;
        font-weight: 700;
        text-align: left;
        font-family: 'Saira', sans-serif;

    }

    .box-transparent p {
        font-size: 20px;
        font-weight: 700;
        text-align: left;
        font-family: 'Saira', sans-serif;

    }

    hr.side {
        border: solid #ddd;
        border-width: 2px 0 0;
        clear: both;
        margin: 22px 0 21px;
        height: 0;
        width: 60%;
    }
}

/* Large screens ----------- */

@media (min-width: 1200px) and (max-width: 3000px) {
    .box-transparent {
        position: relative;
        margin: 12% auto !important;
        background-color: transparent;
        padding: 4rem 4rem;
        width: 100%;
        max-width: 100%;
        height: 400px;
        z-index: 1;
        color: whitesmoke;
        font-size: 36px !important;
        font-weight: 700;
        text-align: left;
        font-family: 'Saira', sans-serif;

    }

    .box-transparent p {
        font-size: 20px;
        font-weight: 700;
        text-align: left;
        font-family: 'Saira', sans-serif;

    }

    hr.side {
        border: solid #ddd;
        border-width: 2px 0 0;
        clear: both;
        margin: 22px 0 21px;
        height: 0;
        width: 60%;
    }
}

/*
.box-transparent {
    position: relative;
    margin: 12% auto;
    background-color: rgba(255, 255, 255, 0.247);
    padding: 10rem 3rem;
    width: 100%;
    max-width: 800px;
    height: 400px;
    z-index: 1;
    color: whitesmoke;
    font-size: 3em;
    font-weight: 700;
    text-align: center;
}

@media (min-width: 1300px) {
    .box-transparent {
        position: relative;
        margin: 15% auto !important;
        background-color: rgba(255, 255, 255, 0.247);
        padding: 10rem 10rem;
        width: 100%;
        max-width: 800px;
        height: 400px;
        z-index: 1;
        color: whitesmoke;
        font-size: 20px;
        font-weight: 700;
        text-align: center;
    }
}

@media (max-width:420px) {
    .box-transparent {
        position: relative;
        margin: 15% auto !important;
        background-color: rgba(255, 255, 255, 0.247);
        padding: 8rem 3rem;
        width: 100%;
        max-width: 800px;
        height: 400px;
        z-index: 1;
        color: whitesmoke;
        font-size: 26px !important;
        font-weight: 700;
        text-align: center;
    }
    .box-transparent p {
        font-size: 20px;
        font-weight: 700;
        text-align: center;
    }
    @media (max-width:420px) {
        .box-transparent p {
            font-size: 20px;
            font-weight: 700;
            text-align: center;
        }
    }
*/
@media (max-width: 480px) {
    blu {
        color: whitesmoke !important;
        margin-top: -10px !important;
        font-family: 'Saira', sans-serif;

    }
}

@media (min-width: 481px) and (max-width: 767px) {
    blu {
        color: whitesmoke !important;
        margin-top: -10px !important;
        font-family: 'Saira', sans-serif;

    }
}

blu {
    color: whitesmoke !important;
    font-family: 'Saira', sans-serif;

}

/*
hr {
    width: 100%;
    max-width: 300px;
    color: #ccc;
}
*/




/*===============================================
* Text Colors
================================================*/

.text-faded {
    color: #FAFAFA;
    font-family: 'Saira', sans-serif;

}

.text-dark {
    color: #37474F;
    font-family: 'Saira', sans-serif;

}

.text-muted {
    color: rgb(37, 37, 37) !important;
    font-size: 1em;
    font-family: 'Saira', sans-serif;

}

.text-muted a {
    color: rgb(37, 37, 37) !important;
    font-size: 1em;
    font-family: 'Saira', sans-serif;
    text-decoration: underline!important;
}

.text-projects {
    color: rgb(37, 37, 37) !important;
    font-size: 1em;
    width: 100%;
    max-width: 500px !important;
    font-family: 'Saira', sans-serif;

}

.text-footer {
    color: rgb(37, 37, 37) !important;
    font-size: .9em;
    margin-bottom: 1px !important;
    font-family: 'Saira', sans-serif;

}

@media (max-width: 480px) {}

/* Landscape phone to portrait tablet */

@media (min-width: 481px) and (max-width: 767px) {}

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 991px) {}

/* Desktops and laptops ----------- */

@media (min-width: 992px) and (max-width: 1199px) {
    .text-muted {
        color: rgb(37, 37, 37) !important;
        font-size: 1em;
        font-family: 'Saira', sans-serif;

    }

    .text-muted a {
        color: rgb(37, 37, 37) !important;
        font-size: 1em;
        font-family: 'Saira', sans-serif;
        text-decoration: underline!important;
    }
}

/* Large screens ----------- */

@media (min-width: 1200px) and (max-width: 3000px) {}

.text-white {
    color: #fff;
    font-family: 'Saira', sans-serif;

}

.text-whited p {
    padding: 6px !important;
    color: #fff !important;
    font-family: 'Saira', sans-serif;

}

.text-primary {
    color: #3f3f3f !important;
    text-align: center !important;
    font-family: 'Saira', sans-serif;

}

.text-primary-light {
    color: #ff80ab;
    font-family: 'Saira', sans-serif;

}

.readmore {
    color: #007bb6;
    font-weight: 500;
    font-family: 'Saira', sans-serif;

}

/*===============================================
* Icon Sizes
================================================*/

.icon-lg {
    font-size: 60px;
    line-height: 18px;
}

.icon-md {
    font-size: 50px;
    line-height: 14px;
    color: #007bb6;
}

.lead2 {
    color: #007bb6;
}

.icon-sm {
    font-size: 30px;
    line-height: 10px;
    color: rgb(44, 44, 44) !important;
}

/*===============================================
* Colored Buttons
================================================*/

.btn {
    box-shadow: 3px 2px 3px rgba(0, 0, 0, 0.15);
    -webkit-transition: 350ms ease all;
    transition: 350ms ease all;
    text-transform: uppercase;
    font-weight: 500;
    padding: .6rem 1.5rem;
}

.btn:hover,
.btn:focus {
    box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15);
}

.btn-white {
    color: #ff4081 !important;
    background-color: #fff;
    border-color: #fff;
}

.btn-white:hover {
    color: #ff4081;
}

.btn-primary {
    background-color: #007bb6 !important;
    border-color: #fdfdfd !important;
    font-family: 'Saira', sans-serif;

}

.btn-primary:hover,
.btn-primary:focus {
    color: #fff !important;
}

.btn-radius {
    border-radius: 50px;
}

/*===============================================
* Borders Utilities
================================================*/

.border-none {
    border: none !important;
    border-color: transparent !important;
}

.border-all {
    border: 1px solid #DEE5E5 !important;
}

.border-left {
    border-left: 1px solid #DEE5E5 !important;
}

.border-right {
    border-right: 1px solid #DEE5E5 !important;
}

.border-top {
    border-top: 1px solid #DEE5E5 !important;
}

.border-bottom {
    border-bottom: 1px solid #DEE5E5 !important;
}

/*===============================================
* Social Icons
================================================*/

.text-twitter-alt,
.text-facebook-alt,
.text-linkedin-alt,
.text-google-alt,
.text-github-alt {
    color: whitesmoke;
}

.text-twitter,
.text-twitter-alt:hover {
    color: whitesmoke;
}

.text-facebook,
.text-facebook-alt:hover {
    color: whitesmoke;
}

.text-google,
.text-google-alt:hover {
    color: whitesmoke;
}

.text-linkedin,
.text-linkedin-alt:hover {
    color: whitesmoke;
}

.text-github,
.text-github-alt:hover {
    color: whitesmoke;
}

/*===============================================
* Cards
================================================*/
/*
.card {
    border: none;
    margin-bottom: 30px;
    padding: 12px;
    box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15);
    position: relative;
    min-height: 300px;
    min-width: 350px;
    width: 100%;
    background: linear-gradient(-45deg, rgb(0, 109, 199), rgb(105, 145, 255), rgb(57, 195, 219), rgb(35, 236, 189), rgb(130, 240, 255));
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
    border-radius: 3px;
    transition: 0.3s ease-in-out;
}*/


/*
@media (max-width: 480px) {
    .card {
        border: none;
        margin-bottom: 60px;
        box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15);
        position: relative;
        min-height: 300px;
        min-width: 300px;
        width: 100%;
        background: linear-gradient(-45deg, rgb(0, 109, 199), rgb(105, 145, 255), rgb(57, 195, 219), rgb(35, 236, 189), rgb(130, 240, 255));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        border-radius: 3px;
        padding: 24px;
        transition: 0.3s ease-in-out;
    }
}


@media (min-width: 481px) and (max-width: 767px) {
    .card {
        border: none;
        margin-bottom: 10px;
        margin-left: -60%!important;
        margin-right: 10%;
        box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15)!important;
        position: relative;
        max-height: 200px;
        min-width: 300px;
        width: 100%;
        background: linear-gradient(-45deg, rgb(0, 109, 199), rgb(105, 145, 255), rgb(57, 195, 219), rgb(35, 236, 189), rgb(130, 240, 255));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        border-radius: 3px;
        padding: 24px;
        transition: 0.3s ease-in-out;
}
}


@media (min-width: 768px) and (max-width: 991px) {
    .card {
        border: none;
        margin-bottom: 30px;
        padding: 12px;
        box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15);
        position: relative;
        min-height: 300px;
        min-width: 300px;
        width: 100%;
        background: linear-gradient(-45deg, rgb(0, 109, 199), rgb(105, 145, 255), rgb(57, 195, 219), rgb(35, 236, 189), rgb(130, 240, 255));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        border-radius: 3px;
        transition: 0.3s ease-in-out;
    }
}


@media (min-width: 992px) and (max-width: 1199px) {
    .card {
        border: none;
        margin-bottom: 30px;
        padding: 12px;
        box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15);
        position: relative;
        min-height: 300px;
        min-width: 300px;
        width: 100%;
        background: linear-gradient(-45deg, rgb(0, 109, 199), rgb(105, 145, 255), rgb(57, 195, 219), rgb(35, 236, 189), rgb(130, 240, 255));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        border-radius: 3px;
        transition: 0.3s ease-in-out;
    }
}


@media (min-width: 1200px) and (max-width: 3000px) {
    .card {
        border: none;
        margin-bottom: 30px;
        padding: 12px;
        box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15);
        position: relative;
        min-height: 300px;
        max-width: 350px;
        width: 100%;
        background: linear-gradient(-45deg, rgb(0, 109, 199), rgb(105, 145, 255), rgb(57, 195, 219), rgb(35, 236, 189), rgb(130, 240, 255));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        border-radius: 3px;
        transition: 0.3s ease-in-out;
    }
}


.card-header{
    width: 100%;
}

.card-text{
    padding-top: 1%;
}

.card-title1 {
    color: #007bb6;
}

.card .card-block .icon-box {
   padding: 20px 0;
    color: #007bb6;
}

@media (max-width: 480px) {
    .card .card-block h6 {
        padding-bottom: 10px;
        font-size: 1.2rem;
        font-weight: 500;
    }
}

.card .card-block h6 {
    padding-bottom: 15px;
    font-size: 1.2rem;
    font-weight: 500;
}

.card:hover {
    box-shadow: 6px 6px 25px rgba(0, 0, 0, 0.15);
}

*/





.cards {
    width: 100%;
    padding: 12px;
    max-width: 1200px;
    justify-content: center;
    /* horizontal center */
    margin: 0 auto;
    font-family: 'Saira', sans-serif;

}


.cardname1 {
    color: #37474F !important;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    margin-top: -10% !important;
    margin-right: -65px !important;
    font-family: 'Saira', sans-serif;

}

.cardname2 {
    color: #37474F !important;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    margin-top: -10% !important;
    margin-right: -122px !important;
    font-family: 'Saira', sans-serif;

}

.cardname3 {
    color: #37474F !important;
    font-size: 24px;
    font-weight: 700;
    position: relative;
    margin-top: -10% !important;
    margin-right: -115px !important;
    font-family: 'Saira', sans-serif;

}

.cardname4 {
    color: #37474F !important;
    font-size: 24px;
    font-weight: 700;
    margin-top: -5% !important;
    font-family: 'Saira', sans-serif;

}

.cardname5 {
    color: #37474F !important;
    font-size: 24px;
    font-weight: 700;
    margin-top: -5% !important;
    font-family: 'Saira', sans-serif;

}


@media (max-width: 480px) {
    .cardname1 {
        color: #37474F !important;
        font-size: 24px;
        font-weight: 700;
        position: relative;
        margin-top: -10% !important;
        margin-right: -68px !important;
        font-family: 'Saira', sans-serif;
    
    }
    
    .cardname2 {
        color: #37474F !important;
        font-size: 24px;
        font-weight: 700;
        position: relative;
        margin-top: -10% !important;
        margin-right: -108px !important;
        font-family: 'Saira', sans-serif;
    
    }
    
    .cardname3 {
        color: #37474F !important;
        font-size: 24px;
        font-weight: 700;
        position: relative;
        margin-top: -10% !important;
        margin-right: -102px !important;
        font-family: 'Saira', sans-serif;
    
    }
}




article {
    color: white;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    float: left;
    width: 33%;
    padding: 20px;
    font-family: 'Saira', sans-serif;
}

@media only screen and (min-width: 961px) {
.gradcard {
    position: relative;
    min-height: 320px!important;
    width: 100%;
    background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
    border-radius: 3px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    transition: 0.3s ease-in-out;
    font-family: 'Saira', sans-serif;

}


.gradcard:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
}


@media only screen and (max-width: 960px) {
    article {
        width: 32%;
    }

    .gradcard {
        position: relative;
        min-height: 200px;
        width: 100%;
        background: linear-gradient(-45deg, rgb(111,168,188), rgb(105, 145, 255), rgb(107, 194, 228), rgb(150, 161, 192));
        background-size: 400% 400%;
        -webkit-animation: Gradient 15s ease infinite;
        -moz-animation: Gradient 15s ease infinite;
        animation: Gradient 15s ease infinite;
        border-radius: 3px;
        padding: 24px;
        box-shadow: 0 10px 20px rgba(169, 201, 255, .4);
        transition: 0.3s ease-in-out;
        font-family: 'Saira', sans-serif;

    }
}

@media only screen and (max-width: 680px) {
    article {
        width: 100%;
        padding: 8px;
    }

    .cards {
        padding: 8px;
    }

    .gradcard:hover {
        transform: scale(1);
        box-shadow: 0 10px 20px rgba(169, 201, 255, .4);
    }

    .gradcard {
        margin-bottom: 8% !important;
    }

}




/*homepage slide*/
/*
#slidecontainer {
    width: 100%;
    margin: 0 auto;
    margin-bottom:45%!important;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19),
    0 6px 6px rgba(0,0,0,0.23);    
    }
*/
/*
@media (min-width: 481px) {
    #slidecontainer {
        width: 100%;
        margin: 0 auto;
        margin-bottom:48%!important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19),
        0 6px 6px rgba(0,0,0,0.23);    
        }
}


@media (max-width: 480px) {
    #slidecontainer {
        width: 100%;
        margin: 0 auto;
        margin-bottom:240%!important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.19),
        0 6px 6px rgba(0,0,0,0.23);
    }  
}
*/


@media (min-width: 300px) and (max-width: 360px) {
    #slidecontainer {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 275% !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
            0 6px 6px rgba(0, 0, 0, 0.23);
    }
}


@media (min-width: 341px) and (max-width: 480px) {
    #slidecontainer {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 200% !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
            0 6px 6px rgba(0, 0, 0, 0.23);
    }
}

/* Landscape phone to portrait tablet */

@media (min-width: 481px) and (max-width: 767px) {
    #slidecontainer {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 80% !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
            0 6px 6px rgba(0, 0, 0, 0.23);
    }
}

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 991px) {
    #slidecontainer {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 80% !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
            0 6px 6px rgba(0, 0, 0, 0.23);
    }
}

/* Desktops and laptops ----------- */

@media (min-width: 992px) and (max-width: 1199px) {
    #slidecontainer {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 60% !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
            0 6px 6px rgba(0, 0, 0, 0.23);
    }
}

/* Large screens ----------- */

@media (min-width: 1200px) and (max-width: 3000px) {
    #slidecontainer {
        width: 100%;
        margin: 0 auto;
        margin-bottom: 45% !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
            0 6px 6px rgba(0, 0, 0, 0.23);
    }
}




#slider {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
    float: left;
    padding: 0;
    /* border: rgb(199, 199, 199) solid 1px;*/
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
        0 6px 6px rgba(0, 0, 0, 0.23);
    /*transition: 0.3s ease-in-out;*/
    /*border-radius:1px;*/
}


@media (max-width: 480px) {
    #slider {
        width: 100%;
        height: 300px;
        position: relative;
        overflow: hidden;
        float: left;
        padding: 0;
        /* border: rgb(199, 199, 199) solid 1px;*/
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
            0 6px 6px rgba(0, 0, 0, 0.23);
        /*transition: 0.3s ease-in-out;*/
        /*border-radius:1px;*/
    }
}

@media (min-width: 481px) {
    #slider {
        width: 100%;
        height: 500px;
        position: relative;
        overflow: hidden;
        float: left;
        padding: 0;
        /* border: rgb(199, 199, 199) solid 1px;*/
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
            0 6px 6px rgba(0, 0, 0, 0.23);
        /*transition: 0.3s ease-in-out;*/
        /*border-radius:1px;*/
    }
}




/*
#slider img {
    width: 940px;
    height: 350px;
}
*/


.img1,
.img2,
.img3,
.img4,
.img5
    {
    width: 100%;
    margin: 0;
    padding: 0;
}



/*contain background image for mobile*/
/*
@media (max-width: 480px) {
    .slide {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    
    .slide:nth-child(1) {
        background: url('../img/blue-floor.jpg');
        background-size: contain;
    }
    
    .slide:nth-child(2) {
        background: url('../img/placida-bartop.jpg');
    }
    
    .slide:nth-child(3) {
        background: url('../img/riverview.jpg');
    }
}
*/

.project-slide {
    position: absolute;
    width: 100%;
    height: 100%;
}

@media (max-width: 480px) {
    .project-slide:nth-child(1) {
        background: url('../img/riverview.jpg');
        background-size: cover !important;
        background-repeat: no-repeat;
    }

    .project-slide:nth-child(2) {
        background: url('../img/blue-floor.jpg');
        background-size: cover !important;
        background-repeat: no-repeat;

    }

    .project-slide:nth-child(3) {
        background: url('../img/81bay-hero.png');
        background-size: cover !important;
        background-repeat: no-repeat;

    }

    .project-slide:nth-child(4) {
        background: url('../img/slider4.jpg');
        background-size: cover !important;
        background-repeat: no-repeat;

    }

    .project-slide:nth-child(5) {
        background: url('../img/guess-hero.png');
        background-size: cover !important;
        background-repeat: no-repeat;

    }
}

@media (min-width: 481px) {

    .project-slide:nth-child(1) {
        background: url('../img/riverview.jpg');
    }

    .project-slide:nth-child(2) {
        background: url('../img/blue-floor.jpg');
    }

    .project-slide:nth-child(3) {
        background: url('../img/81bay-hero.png');
    }

    .project-slide:nth-child(4) {
        background: url('../img/slider4.jpg');
    }

    .project-slide:nth-child(5) {
        background: url('../img/guess-hero.png');
    }
}

/*
.slide:nth-child(4) {
    background: #e7b892;
}

.slide:nth-child(5) {
    background: #c4ad43;
}
*/


/*
#prev,
#next {
    cursor: pointer;
    z-index: 100;
    background: transparent;
    height: 50px;
    width: 50px;
    display: inline-block;
    position: relative;
    top: 250px;
    margin: 0;
    padding: 0;
    opacity: 0.7;
    filter: alpha(opacity=70);
}

#next {
    float: right;
    right: -2px;
}

#prev {
    float: left;
    left: 0;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 15px solid #fff;
    position: relative;
    top: 20%;
    right: -40%;
}

.arrow-left {
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-right: 15px solid #fff;
    position: relative;
    top: 20%;
    left: 30%;
}
*/



@media (max-width: 480px) {
    .slide-copy {
        position: absolute;
        bottom: 5px;
        left: 0;
        padding: 10px 20px 20px 20px;
        /*background: 7f7f7f;
        background: rgba(0, 0, 0, 0.116);*/
        width: 100%;
        max-height: 30%;
        font-family: 'Saira', sans-serif;

    }

    .slide-copy h2 {
        font-size: 28px!important;
    }



    #prev,
    #next {
        cursor: pointer;
        z-index: 100;
        background: transparent;
        height: 50px;
        width: 50px;
        display: inline-block;
        position: relative;
        top: 150px;
        margin: 0;
        padding: 0;
        opacity: 0.7;
        filter: alpha(opacity=70);
    }

    #next {
        float: right;
        right: -2px;
    }

    #prev {
        float: left;
        left: 0;
    }

    .arrow-right {
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 15px solid #fff;
        position: relative;
        top: 20%;
        right: -40%;
    }

    .arrow-left {
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-right: 15px solid #fff;
        position: relative;
        top: 20%;
        left: 30%;
    }
}

@media (min-width: 481px) {
    .slide-copy {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 10px 20px 20px 20px;
        /*background: 7f7f7f;
        background: rgba(0, 0, 0, 0.116);*/
        width: 100%;
        max-height: 32%;
        font-family: 'Saira', sans-serif;

    }

    #prev,
    #next {
        cursor: pointer;
        z-index: 100;
        background: transparent;
        height: 50px;
        width: 50px;
        display: inline-block;
        position: relative;
        top: 250px;
        margin: 0;
        padding: 0;
        opacity: 0.7;
        filter: alpha(opacity=70);
    }

    #next {
        float: right;
        right: -2px;
    }

    #prev {
        float: left;
        left: 0;
    }

    .arrow-right {
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-left: 15px solid #fff;
        position: relative;
        top: 20%;
        right: -40%;
    }

    .arrow-left {
        width: 0;
        height: 0;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        border-right: 15px solid #fff;
        position: relative;
        top: 20%;
        left: 30%;
    }
}

















/*commercial res cards*/

@media (min-width: 481px) {

.cards2 {
    width: 100%;
    /*padding: 12px;*/
    max-width: 1200px;
    justify-content: center;
    margin: 0 auto;
    
    margin-top:10%!important;

}
}

@media (max-width: 480px) {
.cards2 {
    width: 100%;
    /*padding: 12px;*/
    max-width: 1200px;
    justify-content: center;
    margin: 0 auto;
    
    margin-top:120%!important;

}
}




/*
.wrapper {
    width: 100%;
    margin: 0 auto;
    justify-content: center;

    padding-left: 5%;
    position: relative;
}
*/

/*card1*/
.blog-card1 {
    width: 100%;
    max-width: 520px;
    height: 300px;
    position: relative;
    /*top: 50%;
  left: 50%;
  margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    transition: 0.3s ease-in-out;
}

@media (max-width: 480px) {
    .blog-card1 {
        width: 100%;
        max-width: 520px;
        height: 300px;
        position: relative;
        /*top: 50%;
      left: 50%;
      margin: 0 auto;*/
        overflow: hidden;
        border-radius: 1px;
        /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
        text-align: center;
        margin-bottom: 5% !important;
        display: inline-block;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
        transition: 0.3s ease-in-out;
    }
}

.blog-card1.stirling-residential-blog {
    background: url('../img/winn-dixie.jpg') no-repeat;
}

.blog-card1 .color-overlay {
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 520px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card1 .gradient-overlay {
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 520px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card1:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card1:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


/*card2*/
.blog-card2 {
    width: 100%;
    max-width: 520px;
    height: 300px;
    position: relative;
    overflow: hidden;
    border-radius: 1px;
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    transition: 0.3s ease-in-out;
}

.blog-card2.stirling-commercial-blog {
    background: url('../img/brandon-florida.jpg') no-repeat;
}

.blog-card2 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 520px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card2 .gradient-overlay {
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 520px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card2:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card2:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}






.cards3 {
    width: 100%;
    /*padding: 12px;*/
    max-width: 1250px;
    justify-content: center;
    margin: 0 auto;
}

.cardwrap4 {
    width: 100%;
    max-width: 400px;
    height: 330px;
    position: relative;
}

.cardwrap5 {
    width: 100%;
    max-width: 400px;
    height: 330px;
    position: relative;

}

.cardwrap6 {
    width: 100%;
    max-width: 400px;
    height: 330px;
    position: relative;

}


.blog-card3 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/commercial/81bay-brew-co/commercial-page1.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card3 .color-overlay {
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card3 .gradient-overlay {
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card3:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card3:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}




.blog-card32 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    overflow: hidden;
    border-radius: 1px;
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/commercial/central-ave-art-gallery/commercial-page2.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card32 .color-overlay {
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card32 .gradient-overlay {
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card32:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card32:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}




.blog-card33 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/commercial/florida-hospital-center-ice-hockey-arena/comercial-page3.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card33 .color-overlay {
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card33 .gradient-overlay {
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card33:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card33:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


/*card3.4*/
.blog-card34 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/commercial/guess-department-store/comefcialpage4.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card34 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card34 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card34:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card34:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}



/*card3.5*/
.blog-card35 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/commercial/island-court-seafood/commercial-page5.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card35 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card35 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card35:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card35:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}



/*card3.6*/
.blog-card36 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/commercial/winn-dixie/commercial-page6.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card36 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card36 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card36:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card36:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


/*card3.7*/
.blog-card37 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/commercial/placida-pearl/commercial-page7.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card37 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card37 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card37:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card37:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}



/*card3.8*/
.blog-card38 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/commercial/soho-saloon/commercial-page8.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card38 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card38 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card38:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card38:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}




/*card3.9*/
.blog-card39 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/commercial/twin-lobsters/commercial-page9.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card39 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card39 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card39:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card39:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


/*card3.10*/
.blog-card310 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/commercial/joiner-architecture-firm/commercial-page10.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card310 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card310 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card310:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card310:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}



/*card3.11*/
.blog-card311 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/commercial/daiquri-deck-of-venice/commetcial-page-11-tile.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card311 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card311 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card311:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card311:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}



/*card4 residential*/
.blog-card4 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/riverview-florida-countertop/residential-page2.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card4 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card4 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card4:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card4:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}



/*card41 residential*/
.blog-card41 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/kelly-crocker/cover.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card41 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card41 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card41:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card41:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


/*card42 residential*/
.blog-card42 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/driveway2/new-tile.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card42 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card42 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card42:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card42:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


/*card42-5 residential*/
.blog-card42-5 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/quartz-pool-deck/quartz-pool-deck-tile.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card42-5 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card42-5 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card42-5:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card42-5:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}




/*card43 residential*/
.blog-card43 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/backyard-patio/residential-page1.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card43 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card43 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card43:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card43:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


/*card44 residential*/
.blog-card44 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/quartz-flooring-system/pool-deck-cover.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card44 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card44 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card44:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card44:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}




/*card45 residential*/
.blog-card45 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/rotonda-florida-countertop/residential-page4.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card45 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card45 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card45:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card45:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


/*card451 residential*/
.blog-card451 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/garage1/garage1-thumbnail.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card451 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card451 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card451:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card451:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


/*card44_5 residential*/
.blog-card44_5 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/recycled-glass-countertops/cover.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card44_5 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card44_5 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card44_5:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card44_5:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}




/*card46 residential*/
.blog-card46 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/patio/residential-pagepatio.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card46 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card46 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card46:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card46:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}




/*card47 residential*/
.blog-card47 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/valrico-brandon-fl-countertop/residential-page3.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card47 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card47 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card47:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card47:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}



/*card48 residential*/
.blog-card48 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/brandon-florida-floors/after/residential-page7.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card48 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card48 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card48:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card48:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}








/*Countertop Cards*/
.blog-card50 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/facebook-image.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card50 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card50 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card50:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card50:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


.blog-card51 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/riverview-florida-countertop/residential-page2.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card51 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card51 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card51:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card51:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}



.blog-card52 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/rotonda-florida-countertop/residential-page4.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card52 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card52 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card52:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card52:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}



/*kelly crocker*/
.blog-card52_5 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/kelly-crocker/cover.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card52_5 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card52_5 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card52_5:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card52_5:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}






.blog-card53 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/valrico-brandon-fl-countertop/residential-page3.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card53 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card53 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card53:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card53:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


/*Floors*/
.blog-card60 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/brandon-florida-floors/after/residential-page7.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card60 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card60 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card60:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card60:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}



.blog-card61 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/englewood-florida-floors/residential-page6.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card61 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card61 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card61:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card61:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


/*Floors*/
.blog-card70 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/backyard-patio/residential-page1.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card70 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card70 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card70:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card70:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


.blog-card71 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/patio/residential-pagepatio.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card71 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card71 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card71:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card71:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}



.blog-card71_1 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/quartz-flooring-system/pool-deck-cover.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card71_1 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card71_1 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card71_1:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card71_1:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}




.blog-card72 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/patio2/patio2-thumbnail.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card72 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card72 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card72:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card72:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


/*Driveway*/
.blog-card80 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/driveway/residential-page5.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card80 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card80 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card80:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card80:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}


.blog-card81 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/driveway2/driveway2-thumbnail.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card81 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card81 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card81:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card81:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}




/*Pool Decks*/
.blog-card90 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/pool-deck/residential-page9.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card90 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card90 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card90:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card90:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}





.blog-card101 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/garage2/garage-thumbnail.jpeg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card101 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card101 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card101:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card101:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}





.blog-card102 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    /*top: 50%;
    left: 50%;
    margin: 0 auto;*/
    overflow: hidden;
    border-radius: 1px;
    /*box-shadow: 3px 3px 20px rgba(0, 0, 0, .5);*/
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/residential/garage1/garage1-thumbnail.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.blog-card102 .color-overlay {
    /* Rectangle 11: */
    background: rgba(84, 104, 110, 0.096);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card102 .gradient-overlay {
    /* bg-gradient: */
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card102:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card102:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}






/*card4
.blog-card4 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
    
    overflow: hidden;
    border-radius: 1px;
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/guess.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%
}

.blog-card4 .color-overlay {
    background: rgba(84, 104, 110, 0.4);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card4 .gradient-overlay {
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card4:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card4:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}
*/

/*card5
.blog-card5 {
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: relative;
  
    overflow: hidden;
    border-radius: 1px;
    text-align: center;
    margin-bottom: 5% !important;
    display: inline-block;
    background: url('../img/guess.jpg') no-repeat;
    margin-left: 1%;
    margin-right: 1%;
}

.blog-card5 .color-overlay {
    background: rgba(84, 104, 110, 0.4);
    width: 100%;
    max-width: 400px;
    height: 300px;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    transition: background 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

.blog-card5 .gradient-overlay {
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: -o-linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    background-image: linear-gradient(rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, .6) 21%);
    max-width: 400px;
    height: 300px;
    position: absolute;
    top: 350px;
    left: 0;
    z-index: 15;
}

.blog-card5:hover .card-info {
    opacity: 1;
    bottom: 140px;
}

.blog-card5:hover .color-overlay {
    background: rgba(84, 104, 110, 0.8);
}

*/













.title-content {
    text-align: center;
    margin: 60px 0 0 0;
    position: absolute;
    z-index: 20;
    width: 100%;
    top: 0;
    left: 0;
}

.intro {
    width: 170px;
    margin: 0 auto;
    color: #dce3e7;
    font-family: 'Saira', sans-serif;
    font-size: 13px;
    font-style: italic;
    line-height: 18px;
}

.card-info {
    width: 100%;
    position: absolute;
    bottom: 100px;
    left: 0;
    margin: 0 auto;
    padding: 0 50px;
    background-color: transparent !important;
    color: #dce3e7;
    font-family: 'Saira', sans-serif;
    font-style: 22px;
    line-height: 34px;
    outline: none !important;
    border: none !important;
    z-index: 20;
    opacity: 0;
    transition: bottom 0.3s, opacity 0.3s cubic-bezier(0.33, 0.66, 0.66, 1);
}

/*.utility-info {
  position: absolute;
  bottom: 0px;
  left: 0;
  z-index: 20;
}
.utility-list {
  list-style-type: none;
  margin: 0 0 30px 20px;
  padding: 0;
  width: 100%;
}
.utility-list li {
  margin: 0 15px 0 0;
  padding: 0 0 0 22px;
  display: inline-block;
  color: #dce3e7;
  font-family: 'Roboto', sans-serif;
}
.utility-list li.comments {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/icon-chat.svg) no-repeat 0 0.1em;
}
.utility-list li.date {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1765/icon-calendar.svg) no-repeat 0 0.1em;
}*/
















/*
.fab {
    z-index: 1;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    margin-top: -12px;
    right: 42% !important;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, .3);
    color: #fff;
    font-size: 48px;
    line-height: 55px;
    text-align: center;
    background: #007bb6!important;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
}

.fab:hover {
    z-index: 1;
    background: #8eccff;
    color: whitesmoke;
    cursor: pointer;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
*/


/*
Pricing tables & lists
*/

.pricing-list {
    padding-top: 25px;
    padding-bottom: 25px;
}

.pricing-list li {
    font-size: 16px;
    font-weight: normal;
    margin-bottom: 15px;
}

.list-default {
    list-style: none;
    padding-left: 25px;
}

.list-default>li {
    position: relative;
    padding: 6px 0;
    line-height: 1.55em;
    font-size: 0.94rem;
}

.list-default>li:before {
    content: "\f21b";
    position: absolute;
    left: -25px;
    top: 8px;
    font-size: 10px;
    color: #1b47d8;
    font-family: "Ionicons";
}

::selection {
    color: #fff;
    text-shadow: none;
    background: #007bb6;
    font-family: 'Saira', sans-serif;

}

#contacti {
    font-size: 50px;
    color: #007bb6;
    font-family: 'Saira', sans-serif;

}

/*.........mobile...........*/

/* Landscape phones and down */

@media (max-width: 480px) {}

/* Landscape phone to portrait tablet */

@media (min-width: 481px) and (max-width: 767px) {}

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 991px) {}

/* Desktops and laptops ----------- */

@media (min-width: 992px) and (max-width: 1199px) {}

/* Large screens ----------- */

@media (min-width: 1200px) and (max-width: 3000px) {}

/*............homepage............*/
@media (min-width: 481px) and (max-width: 767px) {
    #calmimg {
        width: 100%;
        max-width: 700px;
        padding-bottom: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    #calmimg {
        width: 100%;
        max-width: 800px;
        padding-bottom: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #calmimg {
        float: left;
        width: 100%;
        max-width: 450px;
        padding-bottom: 10px;
        padding-right: 10px;
    }
}

@media (min-width: 1200px) and (max-width: 3000px) {
    #calmimg {
        float: left;
        width: 100%;
        max-width: 600px;
        padding-bottom: 10px;
        padding-right: 15px;
    }
}

/*
@media (min-width: 480px) {
    #calmimg {
        float: left;
        width: 100%;
        max-width: 500px;
        padding-bottom: 10px;
        padding-right: 10px;
    }
}
*/

@media (max-width: 480px) {
    #calmimg {
        width: 100%;
        max-width: 500px;
        padding-bottom: 15%;
    }
}

@media (min-width: 480px) {
    #calmimg2 {
        float: right;
        width: 100%;
        max-width: 500px;
        padding-bottom: 10px;
        padding-left: 10px;
    }
}

@media (max-width: 480px) {
    #calmimg2 {
        float: right;
        width: 100%;
        max-width: 500px;
        padding-bottom: 15%;
    }
}

#abt2 {
    margin-top: 20%;
}

@media (max-width: 480px) {
    #abt2 {
        margin-top: 10%;
    }
}

@media (max-width: 480px) {
    .aboutbtn {
        margin-left: 15%;
    }
}

/* Landscape phone to portrait tablet */

@media (min-width: 481px) and (max-width: 767px) {
    .aboutbtn {
        margin-left: 25%;
    }
}

/* Portrait tablet to landscape and desktop */

@media (min-width: 768px) and (max-width: 991px) {
    .aboutbtn {
        margin-left: 30%;
    }
}

/* Desktops and laptops ----------- */

@media (min-width: 992px) and (max-width: 1199px) {
    .aboutbtn {
        margin-left: 60%;
        margin-top: -3%;
    }
}

/* Large screens ----------- */

@media (min-width: 1200px) and (max-width: 3000px) {
    .aboutbtn {
        margin-left: 10%;
    }
}

.aboutbtn2 {
    margin-top: -3%;
    margin-left: 20%;
}

@media (max-width: 480px) {
    .aboutbtn2 {
        margin-left: 30%;
    }
}

/*....reviews....
.wrapper {
    width: 300px;
    height: 100px;
    display: table;
    border: 2px solid #007bb6;
    margin: 20px auto;
    padding: 10px;
    position: relative;
}

.wrapper:after, .wrapper:before {
    content: '';
    position: absolute;
    font-family: "Font Awesome 5 Free";
    font-size: 20px;
    color: #111;
    background: #fff;
}

.wrapper:after {
    content: '\f10d';
    top: 0;
    left: 0;
    -webkit-transform: translate(-50%, -50%);
       -moz-transform: translate(-50%, -50%);
         -o-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    box-shadow: 10px 10px 0 #fff;
}

.wrapper:before {
    content: '\f10e';
    bottom: 0;
    right: 0;
    -webkit-transform: translate(50%, 50%);
       -moz-transform: translate(50%, 50%);
         -o-transform: translate(50%, 50%);
            transform: translate(50%, 50%);
    box-shadow: -10px -10px 0 #fff;
}
*/
.title,
.description {
    display: table-cell;
    width: 70%;
    vertical-align: middle;
}

.description {
    font-size: 18px;
}

.title {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    padding: 0 20px 0 0;
}

.title small {
    display: block;
    font-size: 25px;
    text-align: right;
}

.border-radius {
    border-radius: 30px;
}

.text-right {
    text-align: right;
}





/*....contact form....*/
/*contact form*/
#contactfield {
    padding-bottom: 5px;
    padding-top: 5px;
}

#status{
    margin: 0 auto!important;
    text-align: center!important;
    font-family: 'Rubik', sans-serif;
    font-size: 16px;
    background-color: rgb(223, 223, 223);
}


#contactfield1 {
    width: 100%;
    max-width: 800px;
    display: block;
    text-decoration: none;
    text-decoration-color: none;
    -webkit-appearance: none;
    margin-bottom: 5px;

}

#contactfield2 {
    width: 100%;
    max-width: 800px;
    display: block;
    text-decoration: none;
    text-decoration-color: none;
    -webkit-appearance: none;
    margin-bottom: 5px;

}

/*
  #contactfield3 {
    width: 100%;
    max-width: 800px;
    display: block;
    text-decoration: none;
    text-decoration-color: none;
    -webkit-appearance: none;
    margin-bottom: 5px;
  
  }
  */
@media (min-width: 1023px) {
    #contactfield1 {
        width: 100%;
        max-width: 398px !important;
        display: inline-block;
        text-decoration: none;
        text-decoration-color: none;
        -webkit-appearance: none !important;
        margin-bottom: 5px;
    }

    #contactfield2 {
        width: 100%;
        max-width: 398px !important;
        display: inline-block;
        text-decoration: none;
        text-decoration-color: none;
        -webkit-appearance: none !important;
        margin-bottom: 5px;

    }

    /*
    #contactfield3 {
      width: 100%;
      max-width: 263px!important;
      display: inline-block;
      text-decoration: none;
      text-decoration-color: none;
      -webkit-appearance: none!important;
      margin-bottom: 5px;
  
    }
    */
}


.form-control1 {
    display: inline-block !important;
    width: 100%;
    max-width: 800px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    text-decoration: none;
    text-decoration-color: none;
    -webkit-appearance: none;
    margin-bottom: 5px;
    font-family: 'Saira', sans-serif;


}

.form-control2 {
    display: inline-block !important;
    width: 100%;
    max-width: 800px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    text-decoration: none;
    text-decoration-color: none;
    -webkit-appearance: none;
    margin-bottom: 5px;
    font-family: 'Saira', sans-serif;


}

.form-control3 {
    display: inline-block !important;
    width: 100%;
    max-width: 800px;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    text-decoration: none;
    text-decoration-color: none;
    -webkit-appearance: none;
    margin-bottom: 5px;
    font-family: 'Saira', sans-serif;


}


@media (min-width: 1023px) {
    .form-control1 {
        width: 100%;
        max-width: 263px !important;
        margin-bottom: 5px;

    }

    .form-control2 {
        width: 100%;
        max-width: 263px !important;
        margin-bottom: 5px;


    }

    /*
  .form-control3{
    width: 100%;
    max-width: 263px!important;
    margin-bottom: 5px;
  
  }
*/
}



@media (min-width: 1200px) and (max-width: 3000px) {
    #contactform {
        padding-left: 15%;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    #contactform {
        padding-left: 8%;
    }
}


.form-control {
    display: block;
    width: 100%;
    max-width: 800px;
    height: 50px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    text-decoration: none;
    text-decoration-color: none;
    -webkit-appearance: none;
    font-family: 'Saira', sans-serif;

}

.form-control:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}

.form-control::-moz-placeholder {
    color: #999;
    opacity: 1
}

.form-control:-ms-input-placeholder {
    color: #999
}

.form-control::-webkit-input-placeholder {
    color: #999
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
    background-color: #eee;
    opacity: 1
}

.form-control[disabled],
fieldset[disabled] .form-control {
    cursor: not-allowed
}

.form-controlm {
    display: block;
    width: 100%;
    max-width: 800px;
    height: 170px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 2px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    text-decoration: none;
    text-decoration-color: none;
    -webkit-appearance: none;
    font-family: 'Saira', sans-serif;

}

.form-controlm:focus {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6)
}

.form-controlm::-moz-placeholder {
    color: #999;
    opacity: 1
}

.form-controlm:-ms-input-placeholder {
    color: #999
}

.form-controlm::-webkit-input-placeholder {
    color: #999
}

.form-controlm[disabled],
.form-controlm[readonly],
fieldset[disabled] .form-controlm {
    background-color: #eee;
    opacity: 1
}

.form-controlm[disabled],
fieldset[disabled] .form-controlm {
    cursor: not-allowed
}



/*
.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 170px;
    background: #c5c5c5;
    border: 0px!important;
}

.footericons{
    font-size: 22px!important;
    padding-bottom: -1%!important;
}

.footer p {
    margin-top: 30px;
}
*/





footer {
    background-color: #aaaaaa;
    color: rgb(51, 51, 51);
    padding: 5px 10px;
    font-family: 'Saira', sans-serif;

}

.social li a:hover {
    opacity: .5
}

#footerdiv {
    font-size: 18px;
    font-weight: 400;
    text-align: center !important;
    margin-bottom: -2px !important;
    font-family: 'Saira', sans-serif;

}


#fphone {
    display: inline-block;
    padding: 1%;
    color: rgb(51, 51, 51) !important;
    font-family: 'Saira', sans-serif;
    text-decoration: none;
}

#fphone a{
    color: rgb(51, 51, 51) !important;
}

#faddress {
    display: inline-block;
    padding: 1%;
    color: rgb(51, 51, 51) !important;
    font-family: 'Saira', sans-serif;


}

#femail {
    display: inline-block;
    padding: 1%;
    color: rgb(51, 51, 51) !important;
    font-family: 'Saira', sans-serif;


}

.footericons {
    font-size: 22px !important;
    padding: 1%;
}

@media (max-width:480px) {
    #footerdiv {
        text-align: center;
        font-size: 17px;
        padding-left: 10px;
        padding-right: 10px;
        font-weight: 400;
        font-family: 'Saira', sans-serif;

    }
}






/*residential*/
#projectsp {
    width: 100%;
    max-width: 450px;
    height: 200px;
    text-align: left;
    margin: 0 auto;
    /*    padding-left: 10px;
    padding-right: 10px;*/
    overflow: hidden;
}

.wrap {
    display: flex;
}









/*commercial page*/


.wrapper-stirling-projects {
    margin-top: -150px !important;
    display: table;
    height: 100%;
    width: 100%;
}

.container-stirling-projects  {
    display: table-cell;
    padding: 1em;
    text-align: center;
    vertical-align: middle;
}

.stirling-projects-logo {
    width: 100px;
    margin-bottom: 15px
}


.card {
    display: block;
    outline: none !important;
    border: 0px !important;
    margin-bottom: 20px;
    /*line-height: 1.42857143;*/
    background-color: #fff;
    border-radius: 0px;
    /* box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); 
    transition: box-shadow .25s;*/
}

.cardimg {
    content: url('../img/guess.jpg');
    width: 100%;
    height: 250px;
    object-fit: cover;
}




















.img-card {
    width: 100%;
    height: 250px;
    /*border-top-left-radius:2px;
  border-top-right-radius:2px;*/
    display: block;
    overflow: hidden;
}

.img-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: all .25s ease;
}

.card-content {
    padding-top: 2px;
    padding-left: 5px;
    padding-bottom: 2%;
    text-align: left;
}

.card-title {
    margin-top: 0px;
    font-weight: 700;
    font-size: 1.65em;
}

.card-title a {
    color: #000;
    text-decoration: none !important;
}

/*.card-read-more {
  border-top: 1px solid #D4D4D4;
}*/
.card-read-more a {
    text-decoration: none !important;
    padding: 10px;
    font-weight: 600;
    text-transform: uppercase
}

/*pagination*/
[data-pagination],
[data-pagination] *,
[data-pagination] *:before,
[data-pagination] *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: auto;
}

[data-pagination] {
    font-size: 8pt;
    line-height: 1;
    font-weight: 400;
    font-family: 'Open Sans', 'Source Sans Pro', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    margin: 1em auto;
    text-align: center!important;
    transition: font-size .2s ease-in-out;
}

[data-pagination] ul {
    list-style-type: none;
    display: inline;
    font-size: 100%;
    margin: 0!important;
    padding: .5em;
}

[data-pagination] ul li {
    display: inline-block;
    font-size: 100%;
    width: auto;
    border-radius: 3px;
}

[data-pagination]>a {
    font-size: 140%;
}

[data-pagination] a {
    color: #777;
    font-size: 100%;
    padding: .5em;
}

[data-pagination] a:focus,
[data-pagination] a:hover {
    color: #f60;
}

[data-pagination] li.current {
    background: rgba(0, 0, 0, .1)
}

/* Disabled & Hidden Styles */
[data-pagination] .disabled,
[data-pagination] [hidden],
[data-pagination] [disabled] {
    opacity: .5;
    pointer-events: none;
}

@media (min-width: 350px) {
    [data-pagination] {
        font-size: 10pt;
    }
}

@media (min-width: 500px) {
    [data-pagination] {
        font-size: 12pt;
    }
}

@media (min-width: 700px) {
    [data-pagination] {
        font-size: 14pt;
    }
}

@media (min-width: 900px) {
    [data-pagination] {
        font-size: 16pt;
    }
}

@media (max-width: 480px) {
    #slider-wrapper {
        max-width: 540px;
        width: auto;
        height: auto;
        margin: 50px auto;
        background-color: transparent;
        padding: 5px;
    }

    #image-slider {
        width: auto;
        height: auto;
        position: relative;
        overflow: hidden;
        margin: auto;
        display: block;
    }

    #image-slider ul {
        width: 100%;
        height: 359px;
        position: relative;
    }

    #image-slider ul li {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 540px;
        width: 100%;
        height: 100%;
    }

    #image-slider ul li img {
        width: 100%;
        height: auto;
    }

    #image-slider ul li.active-img {
        left: 0;
    }

    .next-img {
        z-index: 9999;
    }

    #thumbnail {
        cursor: default;
        margin-top: 3px;
        height: auto;
        display: table;
        width: 100%;
        margin: 0 auto;
    }

    #thumbnail ul {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    #thumbnail li {
        list-style: none;
        /*float: left;*/
        cursor: pointer;
        min-width: 1px;
        margin: 0;

    }

    #thumbnail li img {
        padding: 0;
        float: left;
        margin: 0px 1.5px;
        max-height: 56px;
        height: 56px;
        width: 60px !important;
    }

    #thumbnail li:first-child img {
        margin-right: 0px;
        margin-left: 0px;
    }

}











@media (min-width: 481px) {
    /*body{
        padding: 0;
        margin: 0;
        background-color:#182f3c;
    }
    ul{
        padding: 0;
        margin: 0;
    }*/

    #slider-wrapper {
        max-width: 540px;
        width: auto;
        height: auto;
        margin: 50px auto;
        background-color: transparent;
        padding: 15px;
    }

    #image-slider {
        width: auto;
        height: auto;
        position: relative;
        overflow: hidden;
        margin: auto;
        display: block;
    }

    #image-slider ul {
        width: 100%;
        height: 359px;
        position: relative;
    }

    #image-slider ul li {
        display: inline-block;
        position: absolute;
        top: 0;
        left: 540px;
        width: 100%;
        height: 100%;
    }

    #image-slider ul li img {
        width: 100%;
        height: auto;
    }

    #image-slider ul li.active-img {
        left: 0;
    }

    .next-img {
        z-index: 9999;
    }

    #thumbnail {
        cursor: default;
        margin-top: 3px;
        height: auto;
        display: table;
        width: 100%;
    }

    #thumbnail ul {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
    }

    #thumbnail li {
        list-style: none;
        float: left;
        cursor: pointer;
        min-width: 1px;
    }

    #thumbnail li img {
        padding: 0;
        float: left;
        margin: 0px 1.5px;
        max-height: 56px;
        height: 56px;
        width: 80px !important;
    }

    #thumbnail li:first-child img {
        margin-right: 0px;
        margin-left: 0px;
    }

}

/*comproject2*/
#gallery {
    padding-top: 10px;
}

@media screen and (min-width: 991px) {
    #gallery {
        padding: 10px 30px 0 30px;
    }
}

.img-wrapper {
    position: relative;
    margin-top: 15px;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
}

.img-wrapper img {
    width: 100%;
    -webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.75);
}

.img-overlay {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
}

.img-overlay i {
    color: #fff;
    font-size: 3em;
}

#overlay {
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#overlay img {
    margin: 0;
    width: 90%;
    height: auto;
    object-fit: contain;
    padding: 5%;
}

@media screen and (min-width: 768px) {
    #overlay img {
        width: 70%;
    }
}

@media screen and (min-width: 1200px) {
    #overlay img {
        width: 70%;
    }
}

#nextButton {
    color: #fff;
    font-size: 2em;
    transition: opacity 0.8s;
}

#nextButton:hover {
    opacity: 0.7;
}

@media screen and (min-width: 768px) {
    #nextButton {
        font-size: 3em;
    }
}

#prevButton {
    color: #fff;
    font-size: 2em;
    transition: opacity 0.8s;
}

#prevButton:hover {
    opacity: 0.7;
}

@media screen and (min-width: 768px) {
    #prevButton {
        font-size: 3em;
    }
}

#closeImage {
    color: #fff;
    font-size: 2em;
    transition: opacity 0.8s;
    position: absolute;
    top: 15px;
    right: 15px;
}

#closeImage:hover {
    opacity: 0.7;
}

@media screen and (min-width: 768px) {
    #closeImage {
        font-size: 3em;
    }
}




/*service page*/
.servicesimg{
    content: url(../img/20171107_195636.jpg);
    width: 100%;
    max-width: 900px!important;
    margin: 0 auto;
}

/*service page cards*/
.wrapper-stirling-projects  {
    margin-top: -20%!important;
    display: table;
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

.container-stirling-projects  {
    display: table-cell;
    padding: 1em;
    text-align: center;
    vertical-align: middle;
}

.serviceinfo{
    margin-top: -2%!important;
}

#servicestitle{
    color: #313131 !important;
    text-align: left!important;
    font-weight: 900!important;
}
* {-webkit-font-smoothing: antialiased;}


@media (max-width: 480px) {
.servicesparagraph{
        width: 100%;
        max-width: 330px;
        padding: 2px;
        text-align: left;
        margin: 0 auto;
        font-family: 'Saira', sans-serif;

    }
}

@media (min-width: 481px) and (max-width: 767px) {
.servicesparagraph{
        width: 100%;
        max-width: 600px;
        text-align: left;
        margin: 0 auto;
        font-family: 'Saira', sans-serif;

    }
}

@media (min-width: 768px) and (max-width: 991px) {
.servicesparagraph{
        width: 100%;
        max-width: 800px;
        text-align: left;
        margin: 0 auto;
        font-family: 'Saira', sans-serif;

    }
}


@media (min-width: 992px) and (max-width: 1199px) {
.servicesparagraph{
        width: 100%;
        max-width: 890px;
        text-align: left;
        margin: 0 auto;
        font-family: 'Saira', sans-serif;

    }
}


@media (min-width: 1200px) and (max-width: 3000px) {
.servicesparagraph{
        width: 100%;
        max-width: 1000px;
        text-align: left;
        margin: 0 auto;
        padding-left: 50px;
        padding-right: 50px;
        font-family: 'Saira', sans-serif;

    }
}

.servicesimages{
    margin: 0 auto;
    width: 100%;
    max-width: 900px!important;
}

.servicesimg1{
    display: inline-block!important;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 15px;
}

.servicesimg2{
    display: inline-block!important;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 15px;

}

.servicesimg3{
    display: inline-block!important;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    padding: 15px;

}
/*products page*/

/*product logos*/
.productlogos{
    margin: 0 auto;
    width: 100%;
    max-width: 900px!important;
}

.logo1{
    display: inline-block!important;
    content: url(../img/Flowcrete.png);
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    padding: 18px;
}

.logo2{
    display: inline-block!important;
    content: url(../img/mckinnon.png);
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 18px;

}

.logo3{
    display: inline-block!important;
    content: url(../img/Torginol.png);
    width: 100%;
    max-width: 260px;
    margin: 0 auto;
    padding: 18px;

}


/*Reviews page*/
@media (max-width: 480px) {
    review {
        position: absolute;
        transition: opacity .5s ease-in;
        width: 100%;
        max-width: 400px;
        font-family: 'Saira', sans-serif;
        font-size: 18px;
        font-weight: 500;
        margin: 0;
        padding: 5%;
    }

    review+review {
        opacity: 0;
    }
}


@media (min-width: 481px) {

    review {
        position: absolute;
        transition: opacity .5s ease-in;
        width: 100%;
        max-width: 1200px;
        font-family: 'Saira', sans-serif;
        font-size: 18px;
        font-weight: 500;
        margin: 0;
        padding: 2%;
        text-align: left;
    }


    review+review {
        opacity: 0;
    }
}

#star{
    width: 100px;
}