:root{
    --white: #f2f2f2;
    --darkWhite: #c5c5c5;
    --darkGray: rgb(36, 36, 36);
    --mainFont: 'Raleway', sans-serif;
    --blockFont: 'Staatliches', cursive;
    --coolFont: 'Montserrat', sans-serif;
    --green: rgb(41, 159, 255);
    --subtleBlue: #eaf1fd;
    --darkerGreen: #01c16e;
    --greenGradient: rgba(2, 236, 136, .7);
    --backgroundGradient: linear-gradient(to right, #19165471, #43c6ac5b);
    --blockFont: 'Figtree', sans-serif;
    --blueFont:  rgb(20, 20, 65);
    --accentColor: rgba(144, 238, 255, 0.721);
}

*
{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--mainFont);
    font-weight: lighter;
    transition-duration: .5s;
    transition-timing-function: linear;
    transition-property: all;
    scroll-behavior: smooth;
}

body, html
{
    overflow-x: hidden;
}

body{
    min-height: 100vh;
    width: 100vw;

    background: #43C6AC;  /* fallback for old browsers */

background: var(--backgroundGradient), url("./images/churchSmaller.jpg"); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

a:hover{
    /* text-decoration: underline;
    text-decoration-color: var(--green);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px; */
    color: var(--green);
}

.shadow{
    box-shadow: 0 0 20px gray;
    transition-property: all;
    transition-duration:.3s;
    transition-timing-function: linear;
}

.shadow:hover{
    box-shadow: 0 0 40px gray;
    cursor: pointer;
}

.afterUnderline
{
    position: relative;
}

.afterUnderline::before
{
    content: '';
    position: absolute;
    width: 60%;
    height: 2px;
    top: 100%;
    left: 20%;
    background: var(--green);
}

#facebookPlugin
{
    width: 1000px;
}

.afterUnderlineWhite
{
    position: relative;
}

.afterUnderlineWhite::before
{
    content: '';
    position: absolute;
    width: 60%;
    height: 2px;
    top: 100%;
    left: 20%;
    background: white;
}

.btnRow{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.squareBtn:hover{
    cursor: pointer;
}

.pillBtn
{
    background-color: var(--green);
    border: none;
    color: black;
    padding: 7px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px;
    font-size: 1rem;
}

.pillBtn:hover{
    background-color: var(--darkerGreen);
}

.pillBtnClear
{
    background-color: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0));
    border: 2px solid white;
    color: white;
    padding: 5px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 16px;
    font-size: 1rem;
}

.pillBtnClear:hover{
    background-color: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.8));
}

#slideshow{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100%;
    overflow-y: hidden;
}

#mapid {height: 300px; width: 85vw; z-index: 2;}

#overlay
{
    height: 100vh;
    width: 100vw;
    background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0.6));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.mainFont
{
    font-family: var(--mainFont);
}

.blockFont
{
    font-family: var(--blockFont);
    font-weight: 900;
    font-size: 4.0rem;
}

.greenLetter{
    font-family: var(--coolFont);
    color: var(--green);
    font-size: 80px;
}

.white
{
    font-family: var(--coolFont);
    color: white;

}

h1.white{
    font-size: 50px;
}

.green{
    color: var(--green);
}

.pictureBorder
{
    position: relative;
}

.pictureBorder::before{
    content: '';
    background: var(--green);
    width: 2px;
    height: 35%;
    position: absolute;
    top: 0;
    left: -15px;
}

.pictureBorder::after{
    content: '';
    background: var(--green);
    width: 2px;
    height: 35%;
    position: absolute;
    bottom: 0;
    right: -15px;
}

nav
{
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    gap: 50px;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items:center;
    padding: 20px;
    transition: .3s all linear;
    z-index: 100;
}

.sticky{
    height: 80px;
    background: white;
    box-shadow: 0px 0px 20px rgb(211, 211, 211);
    transition: .3s linear all;
}

.blockFont
{
    font-family: var(--blockFont);
}


.pictureRow
{
    display: flex;
    justify-content: space-between;
    width: 100vw;
}

.pictureDiv
{
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
    width: 600px;
}

.pictureCaption
{
    color: var(--blueFont);
    font-weight: 900;
    font-size: 30px;
    font-family: var(--blockFont);
    position: relative;
    z-index: 2;
}

.pictureCaption::after
{
    content: "";
    position: absolute;
    left: 0;
    top: 60%;
    width: 60%;
    height: 14px;
    transform: skew(-12deg) ;
    background: var(--accentColor);
    z-index: -1;
  }

.pictureWidth{
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 40px;
}

.pictureTextBox
{
    display: flex;
    width: calc(100vw - 600px);
    justify-content: center;
    align-items: center;
}



.leftCurve
{
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}

.rightCurve
{
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}


.desktopNavigation
{
    height: 70px;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 20;
    background: var(--white);
    box-shadow: 0 0 10px gray;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.desktopNavigation a{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 50px;
    color: black;
    font-size: 1.2rem;
}

.navBox{
    display: none;
    background: black;
}

.mobileNavigation
{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background: var(--white);
    color: black;
    transition-duration: unset;
    transition-timing-function: unset;
    transition-property: unset;
    z-index: 10;
}

.mobileNavigation a{
    margin: 15px 0;
    font-family: var(--mainFont);
    color: black;
    font-weight: lighter;
    font-size: 1.8rem;
}

a
{
    text-decoration: none;
}

.contactStrip
{
    height: fit-content;
    width: 100vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    background: var(--green);
    padding: 30px;

}


.iconBubble
{
    height: 40px;
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 50%;
    margin: 10px;
}

.iconBubble:hover{
    background: black;
}

.iconBubble i{
    color: var(--green);
}

.contactStrip a{
    color: white;
}

.contactStrip *{
    color: white;
}

.contactStrip h2{
    font-size: 2.0rem;
}

.footer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: var(--darkGray);
}


.footer > *{
    margin: 10px;
    color: white;
}

.footer a{
    color: white;
    margin: 12px;
}

.innerFooter{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.slide{
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#slideshow img{
    height: auto;
    width: 100vw;
}

.colFlex
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.rowFlex
{
    display: flex;
    justify-content: center;
    align-items: center;
}

.fullPage
{
    min-height: 100vh;
    width: 100vw;
}

#homePage
{
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 5%;
    gap: 20px;
}
h4
{
    font-weight: 100;
    margin: 0;
    padding: 0;
    margin-top: -10px;
    font-size: 20px;
    color: var(--blueFont);
}

.squareBtn
{
    padding: 10px 40px;
    border-radius: 4px;
    background: white;
    font-family: var(--blockFont);
    font-weight: 400;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.squareBtn2
{
    background: rgba(0,0,0,0);
    border: 2px solid white;
    color: white;
}

#infoPage
{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    min-height: calc(100vh );
    width: 100vw;
    
}

#infoPage .colFlex{
    
}

#infoPage h1{
    margin: 10px;
}

.infoBlock
{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px;
    height: 70vh;
    width: 25vw;
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 0px 2px 0 var(--greenGradient);
    backdrop-filter: blur( 5px );
    -webkit-backdrop-filter: blur( 5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    margin: 20px 10px;
}

.infoBlock a{
    color:white;
}

#doctrinePage
{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    width: 100vw;
    height: 85vh;
    margin-top: 70px;
    padding-left: 10%;
    gap: 20px;
    position: relative;
}

.pBlock{
    width: 50%;
    color: white;
}

#doctrinePage2
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start;
    background: white;
    width: 100vw;
    min-height: 100vh;
    padding-top: 30px;
}

.pBlock
{
    width: 60%; 
}

#leftD, #rightD
{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 5px;
}

#leftD
{
    width: 30%;
}

#rightD
{
    width: 60%;
}

ul li{
    margin-left: 15px;
    list-style-type: disc;
    color: var(--green);
}

ul li a{
    color: black;
}

ul li span{
    color: black;
}

.dPoint
{
    margin-bottom: 60px;
}

.dPoint h1
{
    color: var(--green);
    width: fit-content;
    margin-bottom: 5px;
    text-align: left;
}

.dPoint h2{
    font-weight: bold;
    margin-top: 10px;
}

.dBubble
{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 0px 2px 0 var(--greenGradient);
    backdrop-filter: blur( 5px );
    -webkit-backdrop-filter: blur( 5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    height: 180px;
    width: 180px;
    margin: 20px 40px;
}


.dBubble:hover > h1
{
    color: var(--green);
}

.dBubble:hover > i
{
    color: var(--green);
}

.dBubble i 
{
    color: white;
    font-size: 40px;
}

.dBubble h1
{
    color: white;
}

#historyPage
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 60vh;
    width: 100vw;
    gap: 20px;
    position: relative;
}





#historyContent{
    min-height: 100vh;
    width: 100vw;
    z-index: 4;
}

#historyFirst
{
    width: 50vw;
    height: 100vh;
    /* background: linear-gradient(var(--greenGradient), var(--greenGradient)); */
    background: var(--green);
    display: flex;
    justify-content: center;
    align-items: center;
}



a:hover{
    /* text-decoration: underline;
    text-decoration-color: var(--green);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px; */
    color: var(--green);
}


#historySecond
{
    width: 50vw;
    height: 100vh;
    padding: 40px;
}

#historyThird{
 background: var(--white);
 min-height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
flex-direction: column;
padding: 100px 0;
gap: 150px;
}


#historyFourth{
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
   flex-direction: column;
   padding: 75px;
   gap: 150px;
}


#calendar
{
    box-shadow: 0 0 10px gray;
    border-radius: 10px;
}


#leftHistory{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 40%;
}

#rightHistory
{
    background: url("./images/oldChurch.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 300px;
    width: 30%;
}

#backgroundDiv
{
    
}

#contactPage
{
    
}

#contactForm
{
    height: fit-content;
    width: fit-content;
    padding: 20px;
    background: rgba( 255, 255, 255, 0.25 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 5px );
    -webkit-backdrop-filter: blur( 5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    align-items: flex-start;
}

#contactForm > *
{
    margin: 3px;
}

.whiteBackground
{
    background-color: white;
}

.blueBackground
{
    background: linear-gradient(to bottom,#eaf1fd 0%,rgba(255,255,255,0.001) 75%);  opacity: 1; background: #eaf1fd; background: linear-gradient(to bottom,#eaf1fd 0%,rgba(255,255,255,0.001) 100%);  opacity: 1; min-height: 100vh; width: 100vw;
    display: flex;
    justify-content: space-evenly;
    column-gap: 80px;
    row-gap: 40px;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 120px 30px;
}

.aboutCard
{
    height: 350px;
    width: 280px;
    border-radius: 20px;
    box-shadow: 0 0 10px gray;
    overflow: hidden;
    transition: .15s linear all;
    position: relative;
    
}

.internalAbout
{
    height: 100%;
    width: 100%;
    background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('./images/church.jpg');
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-direction: column;
    color: white;
}



#IA2
{
    background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('./images/pexels-luis-quintero-2351717.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#IA3
{
    background: linear-gradient(rgba(0,0,0,.3), rgba(0,0,0,.3)), url('./images/pexels-jonathan-borba-2917373.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.abs
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.subInternal
{
    background: rgba(0,0,0,0);
    width: 100%;
    color: white;
    padding: 10px 15px;
}

.underSub
{
    height: 0%;
    width: 100%;
    z-index: 100;
    transition: .15s linear all;
    background: linear-gradient(rgba(0,0,0,0), rgb(41, 159, 255));
    padding: 10px 15px;
}

.aboutCard:hover
{
    cursor: pointer;
}

.aboutCard:hover .internalAbout{
    transform: scale(120%);
}

.aboutCard:hover .underSub{
    height: 40%;
}

input, textarea{
    width: 300px;
    background: rgba( 255, 255, 255, 0.5 );
    box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
    backdrop-filter: blur( 5px );
    -webkit-backdrop-filter: blur( 5px );
    border-radius: 10px;
    border: 1px solid rgba( 255, 255, 255, 0.18 );
    padding: 5px 0;
}

label{
    color: white;
    transform: translateX(10px);
}

#quoteBlock
{
    width: 75%;
    height: 50%;
    position: absolute;
    top: 25%;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

#quoteBlock > *{
    margin: 4px;
}

#quoteBlock h2
{
    width: 70%;
}

.quoteBubble
{
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background: var(--green);
    display: flex;
    justify-content: center;
    align-items: center;
}

.contactStrip a:hover{
    color: black;
}

.hamburgery{
    display: none;
    width: 100vw !important;
    position: fixed;
    top: 30px;
    right: 10px;
}




.blowup{
    height: 100vh;
}





.hamburgery i:hover
{
cursor: pointer;
}






@media screen and (max-width: 1024px)
{
    #leftContact, #rightContact
    {
        width: 100%;
        margin: 20px 0;
        justify-content: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    .contactStrip{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    #infoPage
    {
        justify-content: center;
    }
    .infoBlock
    {
        width: 80vw;
    }

    .desktopNavigation a
    {
        display: none;
    }
    .desktopNavigation a:nth-of-type(1)
    {
        display: inherit;
    }
    .navBox{
        display: inherit;
    }
    #historyFirst, #historySecond
    {
        width: 100vw;
    }
}



#active, .menu-btn, .wrapper
    {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center ;
    }

@media screen and (max-width: 868px)
{
    .pictureRow{
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .pictureDiv
    {
        order: 1;
        width: 80%;
        margin: 20px 0 -20px 0;
    }

    .pictureTextBox
    {
        width: 100%;
        order: 0;
    }

    .pictureDiv
    {
        border-radius: 10px;
    }
}
@media screen and (max-width: 768px)
{
    .sticky > .hamburgery{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-right: 20px;
    }
    #historyFourth
    {
        padding: 20px;
    }
    #active, .menu-btn, .wrapper
    {
        display: flex;
    }
    nav{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 25px;
    }
    nav a{
        transition: .3s linear all;
        opacity: 0;
    }
    nav a:hover{
        color: var(--darkerGreen);
    }
    #leftHistory, #rightHistory{
        width: 80%;
    }
    #leftD, #rightD
    {
        width: 80%;
    }
    #homePage
    {
        align-items: center;
        margin-left: 0;
    }
    #quoteBlock
    {
        display: none;
    }
}

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

}

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

}

.wrapper ul li{
    list-style: none;
  }

  .wrapper{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    /*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
   /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
    /* clip-path: circle(25px at calc(0% + 45px) 45px); */
    background: white;
    clip-path: circle(25px at calc(100% - 45px) 45px);
    transition: all 0.3s ease-in-out;
    z-index: 19;
  }
  #active:checked ~ .wrapper{
    clip-path: circle(75%);
  }
  .menu-btn{
    position: fixed;
    z-index: 21;
    right: 30px;
    /* left: 20px; */
    top: 20px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    border: none;
    box-shadow: 0;
    font-size: 20px;
    color: #fff;
    cursor: pointer;
    /*background: linear-gradient(-135deg, #c850c0, #4158d0);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
   /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
    background: white;
    transition: all 0.3s ease-in-out;
  }
  #active:checked ~ .menu-btn{
    color: #fff;
  }
  #active:checked ~ .menu-btn i:before{
    content: "\f00d";
  }
  .wrapper ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style: none;
    text-align: center;
  }
  .wrapper ul li{
    margin: 15px 0;
  }
  .wrapper ul li a{
    color: none;
    text-decoration: none;
    font-size: 30px;
    font-weight: 500;
    padding: 5px 30px;
    color: #fff;
    border-radius: 50px;
    background: #000;
    position: relative;
    line-height: 50px;
    transition: all 0.3s ease;
  }
  
  .wrapper ul li a:after{
    position: absolute;
    content: "";
    height: 2px;
    width: 0%;
    background: var(--green);
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 10%;
    /*
    background: #fff;
    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
    width: 104%;
    height: 110%;
    left: -2%;
    top: -5%; 
    border-radius: 50px;
    transform: scaleY(0);
    z-index: -1;
    
    */
    
  }
  .wrapper ul li a:hover:after{
    width: 80%;
  }

  .wrapper ul li a:hover{
    color: #fff;
  }
  input[type="checkbox"]{
    display: none;
  }
  .content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    text-align: center;
    width: 100%;
    color: #202020;
  }
  .content .title{
    font-size: 40px;
    font-weight: 700;
  }
  .content p{
    font-size: 35px;
    font-weight: 600;
  }
  
  @keyframes rotate {
    0%{
      filter: hue-rotate(0deg);
    }
    100%{
      filter: hue-rotate(360deg);
    }
  }

  nav a{
    color: rgb(255, 255, 255);
    font-weight: bolder;
    font-size: 16px;
    text-transform: uppercase;
    font-family: var(--blockFont);
    font-weight: 300;
}

nav.sticky a{
    color: black;
}