@charset "utf-8";
/* LESS Document */

@import '../styles/style-colors.less';
@import '../styles/style-fonts.less';

/*********************************************************************************************/
/*HOME PAGE CSS STYLE
/*********************************************************************************************/

.home-sect {
    width: 100%;
    display: block;
    position: relative;
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
	padding: 32px 0 32px 0;
}

/* SECT - HEADER */

#header {
    height: 1080px;
    background-image: url("/images/bgs/bg-home-header.jpg");
    background-position: 50% 0;
}

#header > img {
    display: block;
    position: relative;
    margin: 380px auto;
    left: auto;
    right: auto;
    width: 30%;
}

@media screen and (min-width: 1280px) {
    #header > img {
    width: 30%;
    }
}

@media screen and (max-width: 1280px ) and (min-width: 960px) {
    #header > img {
    width: 40%;
    }
}

@media screen and (max-width: 960px ) and (min-width: 720px) {
    #header > img {
    width: 50%;
    }
}

@media screen and (max-width: 720px ) and (min-width: 0px) {
    #header > img {
    width: 65%;
    }
}

/* SECT - LOCATION TIME */

#locTimes {
    height: auto;
    background: white;
}

#locTimes > h2 {
    text-align: center;
}

#locTimes > #left {
    float: left;
}

#locTimes > #left > img {
    width: 60%;
    margin: 0 25%;
    float: right;
}

#locTimes > #right {
    width: 20%;
    float: left;
    margin: 96px 10%;
}

#locTimes > #right > div > ul {
    display: block;
    width: auto;
    position: relative;
    list-style-type: none;
    float: left;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}

#locTimes > #right > div > #service {
    float: left;
}

#locTimes > #right > div > #time {
    float: right;
}

#locTimes > #right > div > ul > li > a, #locTimes > #right > div > ul > li {
    font-family: 'Roboto'-light;
    font-style: normal;
    font-size: 1.4em;
    color: @gray-dark;
}

#locTimes > #right > div > ul > li.header > a, #locTimes > #right > div > ul > li.header {
    font-family: 'Roboto'-medium;
    font-style: normal;
    font-size: 1.65em;
    color: @gray-dark;
}

/* LOCTIMES MEDIA QUERIES */

@media screen and (min-width: 1600px){
}

@media screen and (min-width: 1280px) and (max-width: 1600px) {
}

@media screen and (max-width: 1280px) and (min-width: 580px) {
    #locTimes > #right {
        width: 50%;
        margin-left: 25%;
    }
    
    #locTimes > #left {
        width: 100%;
    }
    
    #locTimes > #left > img {
        width: 100%;
        float: none;
        margin: 0 auto;
    }
    
    #locTimes > #right > .button {
        display: block;
        width: 100%;
        padding: 0.4em 0 0.4em 0;
    }
}

#time > li {
	font-weight: 800;
	text-align: right;
}


#service > .header {
	font-weight: 800;
}

@media screen and (max-width: 580px) and (min-width: 0px) {
    #locTimes > #right {
        width: 80%;
        margin-left: 10%;
    }
    
    #locTimes > #left {
        width: 100%;
    }
    
    #locTimes > #left > img {
        width: 100%;
        float: none;
        margin: 0 auto;
    }
    
    #locTimes > #right > .button {
        display: block;
        width: 100%;
        padding: 0.4em 0 0.4em 0;
    }
}

/* SECT - WELCOME */
#welcome {
    height: auto;
    background: #cfd8dc;
}

#welcome > h2 {
    text-align: center;
}

#welcome > div {
    display: block;
    position: relative;
    height: auto;
}


#welcome > div > .card {
    display: block;
    position: relative;
    float: left;
    width: 30%;
    min-height: 512px;
    height: auto;
    margin: 64px 1.6% 64px 1.6%;
    background: white;
}

#welcome > div > .card > .image {
    display: block;
    position: relative;
    width: 100%;
    height: 256px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background-position: 50% 50%;
}

#welcome > div > .card > .image > img {
    display: block;
    position: relative;
    width: auto;
    height: 64px;
    margin: 0 auto 0;
    top: 80px;
    background-color: #1D262B;
    border-radius: 12.5%;
    padding: 16px;
}

#welcome div .card h3 {
    text-align: center;
}

#welcome div .card p {
    padding: 0 5% 0 5%;
}

#meet.card > .image {
    background-image: url("https://unsplash.imgix.net/photo-1428677361686-f9d23be145c9?q=75&fm=jpg&w=1080&fit=max&s=065d7c563beaf310b431d9d4168ee0be");
}

#join.card > .image {
    background-image: url("https://ununsplash.imgix.net/photo-1428604467652-115d9d71a7f1?fit=crop&fm=jpg&h=700&q=75&w=1050");
}

#serve.card > .image {
    background-image: url("https://unsplash.imgix.net/photo-1421977870504-378093748ae6?fit=crop&fm=jpg&h=700&q=75&w=1050");
}

@media screen and (min-width: 1024px) {
    
    #welcome > div > .card {
        width: 30%;
        margin: 64px 1.6% 64px 1.6%;
    }
    
    #welcome > div {
        width: 90%;
        margin: 0 5%;
    }
    
}

@media screen and (max-width: 1024px) and (min-width: 720px) {
    
    #welcome > div > .card {
        width: 30%;
        margin: 64px 1.6% 64px 1.6%;
    }
    
    #welcome > div {
        width: 95%;
        margin: 0 2.5%;
        
    }
}

@media screen and (max-width: 720px) and (min-width: 0px) {
    
    #welcome > div > .card {
        width: 100%;
        margin: 0px 0 48px 0;
    }
    
    #welcome > div {
        width: 90%;
        margin: 0 5%;
        
    }
}


/* SECT DONATE AND PODCAST */
.home-sect > .info-group {
    display: block;
    width: 15%;
    margin: 96px 10% 0 10%;
    opacity: 1.0;
}



.home-sect > .info-group > h3,
.home-sect > .info-group > p {
    color: white;
}

.home-sect > .info-group > p {
    font-size: 1.25em;
}

.home-sect > .info-group > img {
    position: relative;
    margin: 0 auto;
    display: block;
}

#donate, #podcast {
	background-attachment: fixed;
}

/* SECT - DONATE */

#donate {
    background-image: url("/images/bgs/bg-home-donate.jpg");
    height: 720px;
}

#donate > .info-group {
    float: left;
}

/* SECT - PODCAST */

#podcast {
    background-image: url('/images/homeSection-podcasts.jpg');
    height: 720px;
}

#podcast > .info-group {
    float: right;
}

/* INFO GROUP MEDIA QUERIES */

@media screen and (min-width: 1600px){
    .home-sect > .info-group {
        width: 20%;
        margin: 96px 10% 0 10%;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1600px) {
    .home-sect > .info-group {
        width: 35%;
        margin: 96px 10% 0 10%;
    }
}

@media screen and (min-width: 960px) and (max-width: 1280px) {
    .home-sect > .info-group {
        width: 35%;
        margin: 96px 10% 0 10%;
    }
}

@media screen and (max-width: 960px) and (min-width: 580px) {
    #donate > .info-group, #podcast > .info-group {
        width: 60%;
        margin: 96px auto 0 auto;
        float: none;
    }
    
    .home-sect > .info-group > img {
        width: 65%;
    }
    
    #donate, #podcast {
        background-position: 50%;
    }
    
    .info-group > .button {
        display: block;
    }
}

@media screen and (max-width: 580px) and (min-width: 0px) {
    #donate > .info-group, #podcast > .info-group {
        width: 80%;
        margin: 96px auto 0 auto;
        float: none;
    }
    
    .home-sect > .info-group > img {
        width: 65%;
    }
    
    #donate, #podcast {
        background-position: 50%;
    }
    
    .info-group > .button {
        display: block;
    }
}