@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:wght@600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Stencil+Text:wght@100;600&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');

.element-items{

    width: 100%;

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    justify-content: space-around;

    background: #fc4a1a;  /* fallback for old browsers */

    background-color: #000000;

    background-image: linear-gradient(315deg, #000000 0%, #ffffff 74%);    

}



.element-items a{

    width: 270px;

    height: 350px;

    margin: auto; 

    background-size: cover;

    background-position: center;

    background-color: black;

  /*background-blend-mode: soft-light; */

    color:white;

    margin: 5% 0;

    background-repeat: no-repeat;

} 



.sup {

    position: relative;

    bottom: 1ex; 

    font-size: 80%;

    color: #fc4a1a;

    font-size: bold;

  }



#verse{

    text-align: center;

}



.sup, #verse{

    font-weight: bold;

}

/*.element-items h4{ 

    transform: translateY(90%);

    transition: opacity 1s ease-in;

} */

.element-items a p{

    opacity: 0%;

    transition: opacity .5s ease-in;

}



.element-items a:hover p{ opacity: 100%;}

/*.element-items a:hover h4{transform: translateY(-90%);} */



.fas{

    padding: 5px;

}



.element-items a h4{

    margin-top: 150px;

    font-size: 2em;

}



.element-items a h4, .element-items a p{

    margin-left: 10px;

    background-color: rgba(0,0,0,0.2);

}



.moon-man{

    flex-wrap: wrap;

    height: 1000px;

}



.element-items i{

    font-size: 24px;

    text-align: center;

}



/* About Us page for events page */





.articleAbout img{

    width: 250px;

    height: 250px;

}





/* Information on our ministers */

#ministers{

    text-align: center;

}

.ministers{

    text-align: center;

    display: flex;

    flex-wrap: wrap;

    box-sizing: border-box;

    justify-content: space-evenly;

}

#ministers-help{

    font-size:1em;

    justify-content: space-around;

}

.ministers h1{

    display: flex;

    flex-wrap: wrap;

    flex-grow: 1;

    justify-content: flex-start;

    padding: 0;

    margin: 0;

}



.min-information{

    margin: 10px;

    display: block;

    width: 385px;

    transition: all 0.3s ease;

    box-sizing: border-box;

}



.min-information:hover{border: 7px solid #ABB2B9}



.min-information p:last-child{

    padding-bottom: 10px;

}

.min-information p:nth-child(3){

    color:#E74C3C;

    font-size: 1.3em;

}



.min-information p:nth-child(3){

    font-size: 1em;

}





.ministers img{

    width: 130px;

    height: 130px;

    border-radius: 50%;

    margin-top: 20px;

    margin-bottom: 20px;

    text-align: center;

}



/* Information Hub Page */



.Welfare{

    font-size: 1.3em;

    font-family:'Roboto', sans-serif;

    color: #2c2c2c;

    line-height: 1.1em;

    width: 75%;

    margin: auto;

}



.item h2{padding: 10px;}

.inner-box{

    display: grid;

    grid-template-columns: 2.3fr 1fr;

    padding: 10px;

}



.item section, .item aside{

    box-shadow: 

    inset 0 -3em 3em rgba(0,0,0,0.1), 

          0 0  0 2px rgb(255,255,255),

          0.3em 0.3em 1em rgba(0,0,0,0.3);

    padding: 2em;

}



.item section{

    font-size: 1.2em;

}



.item aside {

    font-size: 1.2em;

}



.item aside a{ color: #F7F9F9; font-weight: bold; display: block; padding: 1em 0; text-align: center; background-color: #E74C3C;}

.item aside a:hover{background-color: rgba(0,0,0,0.3);}







.infohub{

    width: 80%;

    margin: 3% auto;

}



.infohub h1{

    color: #e72e19;

}



.item{

    width: 95%;

} 



.grid-list{

     text-align: center;

     font-weight: bold;

     margin: 10px;

}



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

    .inner-box{

        display: grid;

        grid-template-columns: auto;

    }

}

/* Events Page */

.calendarSpace{

    width: 100%;

    background-size: cover;

    height: 20%;

}



.calendarBanner {

    width: 50%;

    padding: auto;

}

.calendarBanner h1:first-child, .calendarBanner h1:nth-child(2), .calendarBanner p{

    color: #FBFCFC;

}

.calendarBanner h1:first-child{

    font-size: 5.5em;

    font-family: 'Big Shoulders Stencil Text', cursive;



}



.calendarBanner h1:nth-child(2){

    font-size: 4.3em;

    font-family: 'Big Shoulders Stencil Text', cursive;

}

.event-list{

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1fr;

}



.event-list li{

     border: 1.5px solid black;

     height: 20.625em;

     background-color: #17202A;

}

.event-list li h3{

    font-size: 2em;

    padding: 10px;

    color: #F7F9F9;

}

.event-list li p{

    padding: 10px;

    font-size: 1em;

    color: #F7F9F9;

}



/* Responsive view */

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

    .event-list{

        grid-template-columns: 1fr;

    }

}







/* Design for the hispanic section page */

.messagesContainer{

    width: 100%;

}



.audioHeader{

    font-size:3em; 

    margin:20px; 

    text-align: center;

}

/* Contact Us page */

.contact-space {

    font:  small-caps bold 20px 'Lato', sans-serif;

    text-align: center;

    border-radius: 5px;

    padding: 20px;

}

input[type=text], select, textarea {

    width: 70%;

    padding: 12px;

    border-radius: 4px;

    resize: vertical;

}



label{

    padding: 12px 12px 12px 0;

    display: inline-block;

}



input[type=submit] {

    background-color: #4caf50;

    color: #FDFEFE;

    padding: 12px 20px;

    border: none;

    border-radius: 4px;

    cursor: pointer;

}



input[type=submit]:hover{

    background-color: #45a049;

}





.col-25, .col-75 {

    border-radius: 5px;

    background-color: #FDFEFE;

    padding: 3px;

  }

.row:after {

    content: "";

    display: table;

    clear: both;

}



/*Responsive layout */

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

    .col-25, .col-75, input[type=submit]{

        width: 100%;

        margin-top: 0;

    }

}



/* Individual ministers page */

.page{

    width: 80%;

    margin: 5% auto;

    display: block;

    overflow: auto;

}





.title{

    width: 80%;

    padding-top: 4em; 

    padding-left: 8em;

    padding-bottom: 2em;

    display: flex; 

    flex-wrap: wrap;

    box-sizing: border-box;

} 



.title img{

    width: 180px;

    height: 180px;

    border-radius: 100%;

}



.title-name{

    padding: 1.7em;

}



.title-name p{

    font-weight: 300;

    font-size: 1.5em;

    color: #E74C3C;

}



.min-info{

    max-width: 80%;

    margin: auto;

    font-family: 'Roboto', sans-serif;

    font-size: 1.2em;

}



/* Responsive individual minsiters page */



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

    .title{

        width: 100%;

        flex-direction: column; 

    }

    .title-name p{

        font-size: 13px;

    }

    .title img{

        text-align: center;

    }



    .title-name{

        font-size: 12px;

    }

}



/* Audio pages */

.content-box{

    margin: 5% auto;

    width: 95%;

    display: flex;

    flex-wrap: wrap;

}



.box{

   width: 250px;

   height: 325px;

   margin: 20px 20px; 

   box-shadow: 

       inset 0 -3em 3em rgba(0,0,0,0.1), 

             0 0  0 2px rgb(255,255,255),

             0.3em 0.3em 1em rgba(0,0,0,0.3);

}



.innerItem{

    width: 100%;

    height: 90%;

    background-repeat: no-repeat;

    background-size: cover;

   /* background-color: red; */

}



.otherItem{

    width: 100%;

    height: 10%;

    background-color: #17202A;

}



.fas, .content-box h1{

    color: #FDFEFE;

}



fas{ margin: 10px 20px;}



.content-box h1{

    padding: 50% 10%;

    font-family:'Roboto', sans-serif;

}