@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 600;
    src: local('Lato-H'), url('../font-files/Lato-Heavy.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 800;
    src: local('Lato-B'), url('../font-files/Lato-Bold.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 300;
    src: local('Lato-L'), url('../font-files/Lato-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato-R'), url('../font-files/Lato-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
    src: local('Lato-R'), url('../font-files/Lato-Italic.ttf') format('truetype');
}

.read-more {
    font-family: 'Lato';
    font-style: italic;
    font-weight: 400;
}



body { margin: 0px; }

.big-margin-top { margin-top: 24px; }
.big-padding-top { padding-top: 24px; }
.big-padding-bottom { padding-bottom: 24px; }

.half-right-padding { padding-right: 8px }
.half-left-padding { padding-left: 8px }

.no-padding-left { padding-left: 0px; }
.no-padding-right { padding-right: 0px; }

.page-container {
    margin: 0 auto;
    max-width: 1000px;
}

.headshot {
    display: inline-block;
    border-radius: 50%;
    border: 3px solid black;
}

.header-inner {
    display: inline-block;
    margin: 20px 0;
}

.header-container {
    text-align: center;
    border-bottom: 10px solid #3580B7;

    background-image: url(../img/header1070.png);
    background-repeat:no-repeat;
    background-position: center center;
    background-size: cover;

}

.content-section {
    background-color: #eee;
}

.header-text {
    display: inline-block;
    vertical-align: top;
    margin-top: 18px;
    margin-left: 8px;
}

.header-name {
    font-family: Lato;
    font-weight: 800;
    font-size: 3.7em;
    margin: 0px;
}

.header-sub-text {
    margin: 0px;
    font-family: Lato;
    font-weight: 300;
    font-size: 2.2em;
}

.intro-welcome {
    font-family: Lato;
    font-weight: 600;
    font-size: 20px;
}

.intro-body {
    font-family: Lato;
    font-weight: 400;
    font-size: 16px;
}

.basic-link {
    text-decoration: none;
    cursor: pointer;
    color: white;
}

.basic-link:hover {
    cursor: pointer;
    opacity: 0.5;
    text-decoration: none;
}

.whitehover:hover {
    color: #eee;
}

.shop-box { background-image: url(../img/exterior.png); }
.list-box { background-image: url(../img/kitchen-1.png); }
.buy-box { background-image: url(../img/kitchen-2.png); }

.testimonials-box { 
    border-radius: 10px;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c5d7d1+0,b7d2d1+100 */
    background: #c5d7d1; /* Old browsers */
    background: -moz-linear-gradient(left, #c5d7d1 0%, #b7d2d1 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #c5d7d1 0%,#b7d2d1 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #c5d7d1 0%,#b7d2d1 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5d7d1', endColorstr='#b7d2d1',GradientType=1 ); /* IE6-9 */

}

.greyhover:hover {
    color: grey;
}

.stats-box { 
    background-image: url(../img/stats.png); 
    background-position: center bottom;
    background-position: 10px 10px;
    height: 370px;

    background-position: center 53px;
    border-radius: 10px;
    background-repeat:no-repeat;
    color: white;
    background-size: cover;
    background-color: white;
}


.secondary-box-header {
    color: #264653;
    font-family: Lato;
    font-weight: 600;
    font-size: 22px;
    cursor: pointer;
}

.box .box-header {
    margin-left: 24px;
    margin-bottom: 5px;
}
.box .box-body {
    margin: 0 24px;
    padding-bottom: 21px;
}

.sidebar-adtrack {
    width: 100%;
    margin-top: 20px;
}

.sidebar-adtrack img {
    display: block;
    max-width: 100%;
    height: auto;
}

.box {
    border-radius: 10px;
    background-repeat:no-repeat;
    background-position: center center;
    color: white;
    padding-top: 12px;
    background-size: cover;
}

.shop-box ul li {
    font-family: Lato;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
}

.shop-box ul {
    list-style-type: none;
    padding: 0px;
    padding-left: 0px;
    padding-left: 24px;
    padding-bottom: 12px;
}

.box-header {
    font-family: Lato;
    font-weight: 600;
    font-size: 22px;
}

.box-body {
    font-family: Lato;
    font-weight: 400;
    font-size: 16px;
}

.carousel-indicators {
    bottom: -5px !important;
}

.testimonials-box .box-body {
    padding: 0 22px 22px 22px;
}

.read-more {
    color: white;
}

.footer-images {
}

.footer-images .img-container {
    float: left;
    width: 25%;
}

.footer-inner {
    width: 50%;
    margin: 0 auto;
    color: white;
    margin-top: 32px;
}


.footer-container {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#3580b7+0,3c518c+100 */
    background: #3580b7; /* Old browsers */
    background: -moz-linear-gradient(left, #3580b7 0%, #3c518c 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #3580b7 0%,#3c518c 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #3580b7 0%,#3c518c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3580b7', endColorstr='#3c518c',GradientType=1 ); /* IE6-9 */

    border-top: 10px solid #3580B7;

}


.copyright {
    background-color: black;
    color: white;
    margin: 0px;
    text-align: center;
    padding: 7px;
    margin-top: 17px;
    font-family: Lato;
    font-weight: 400;
}

.copyright p  {
    margin: 0px;
}

.footer-text {
    margin-top: 12px;
}

.footer-name {
    font-weight: 600;
    font-family: Lato;
    font-size: 24px;
}

.footer-left-info {
    font-weight: 300;
    font-family: Lato;
}

.social-media-links{
    width: 50%;
    margin-top: 8px;
    margin-bottom: 7px;
}
.social-media-links .media-icon-wrapper{
    width: 33%;
    float: left;
}

.bottom-box-btn {
    width: 100%;
    background-color: #3580B7;
    color: white;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-top: 8px;
    padding: 12px 0px 12px 24px;
    font-size: 16px;
    font-family: Lato;
    font-weight: 600;
    display: none;
}

.top-box-btn {
    padding-left: 18px;
    padding-top: 10px;
}

.adtrack-mobile {
    width: 100%;
    height: 80px;
    margin-top: 20px;
}

.adtrack-mobile img {
    display: block;
    max-width: 100%;
    height: auto;
}

@media (max-width: 600px) {

/*
    .header-sub-text {
        font-size: 1.12em;
    }

    .header-name {
        font-size: 1.9em;
    }
    */
    .header-sub-text {
        font-size: 1.4em;
    }

    .header-name {
        font-size: 2.4em;
    }
}

@media (max-width: 992px) {
    .bottom-box-btn {
        display: block;
    }

    .top-box-btn p {
        margin: 0px;
        color: white;
    }

    .top-box-btn {
        width: 100%;
        color: white;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        margin-top: 8px;
        padding: 12px 0px 12px 24px;
        font-size: 16px;
        font-family: Lato;
        font-weight: 600;
    }

    .green-top { background-color: #264653; }
    .secondary-box-header {
        color: white;
    }

}

@media (max-width: 767px) {
    .footer-inner {
        width: 90%;
    }

    .small-center {
        text-align: center;
    }

    .social-media-links {
        margin: 10 auto;
        width: 26%;
    }

    .center-xs {
        text-align: center;
        margin: 0px;
    }

    .stats-box { 
        background: #264653;
        height: 54px;
    }

    .testimonials-box { 
        background: #264653;
    }

    .secondary-box-header {
        color: white;
    }

    .testimonials-box .box-body {
        display: none;

    }

    .testimonials-carousel {
        display: none;
    }

    .box .box-header, .box-body {
        padding-bottom: 8px;
    }

    .top-box-btn {
        border-radius: 10px;
    }

    .middle-link {
        text-align: center;
        padding-bottom: 10px;
    }
}


@media (max-width: 400px) {
    .header-sub-text {
        font-size: 1.12em;
    }

    .header-name {
        font-size: 1.9em;
    }

}