/**
*Theme Name: barefootdesign_s
* 
*Layout: front page
*/

.site-content {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.content-area {
    position: relative;
    margin: 0px;
    padding: 48px 0px;
}

.landing-line {
    padding: 36px 0px;
}

.landing-line h1{
    padding:0px;
    margin: 0px;
    margin-bottom: 36px;
    font-size: 48px;
    text-align: center;
    width: 100%;
    display: block;
}

i.fa-caret-down {
    width: 100%;
    text-align: center;
    font-size: 22px;
    color: #CD6600;
}

@media screen and (max-width: 768px) {
    .content-area {
        padding: 24px 0px;
    }

    .landing-line h1{
        margin-bottom: 32px;
        font-size: 40px;
    }
 
}



/***************************** intro *****************************/

#intro.landing-line {
    padding: 0px;
}

#intro .intro-22,
#quote {
    width: 80%;
    margin: 1% 10%;
    text-align: center;
    font-size: 22px;
    font-weight: 300;
}

#intro .intro-22 {
    margin-bottom: 3%;
}

#intro .intro-19 {
    font-size: 19px;
    width: 80%;
    margin: 1% 10%;
    text-align: center;
    font-weight: 300;
}



@media screen and (max-width: 768px) {
    #intro {
        padding-top: 0px;
    }

     #intro .intro-22,
     #quote {
        font-size: 20px;
    }

    #intro .intro-19{
        font-size: 17px;
    }
 
}

/***************************** gallery *****************************/

#gallery {
    max-width: 1080px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 16px 48px 16px;
}

#gallery .art-wrapper {
    display: inline-block;
}

#gallery a.gallery-box {
    width: 24.5%;
    float: left;
    margin: .25%;
    text-decoration: none;
}

#gallery a.gallery-box:hover {
    opacity: .92;
}

#gallery a.gallery-box img{
    display: block;
    margin-bottom: 2%;
}

#gallery a.gallery-box h1{
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0px;
    background-color: #CD6600;
    color: #fff;
}

@media screen and (max-width: 1000px) {

    #gallery {
        padding: 28px 16px 40px 16px;
    }

    #gallery a.gallery-box {
        width: 49.5%;
        margin: .25%;
    }

    #gallery a.gallery-box img{
        margin-bottom: 1%;
    }
}

@media screen and (max-width: 512px) {

    #gallery {
        padding: 28px 16px 40px 16px;
    }

    #gallery a.gallery-box {
        width: 99%;
        margin: .5%;
    }
}

   








/***************************** quote *****************************/

#quote .name {
    text-align: center;
    font-weight: 700;
    font-size: 14px;
}