@font-face {
    font-family: poppins;
    src: url(../fonts/Poppins/Poppins-Light.ttf);
}


:root{

    --dark: #d31717;
    --lantern-yellow: #f0a63c;
    --monk-orange:  #d88c3a;
    --light: rgb(255, 247, 235);
}


* {box-sizing: border-box;}


html{
    background-color: var(--lantern-yellow);
    scroll-behavior: smooth;
    overflow-x: hidden;
}



/* NAVBAR */
#navbar {
    overflow: hidden;
    background-color: transparent;
    padding: 0 0 0 0;
    transition: 0.4s;
    position: fixed;
    width: 100vw;
    z-index: 98;



    transition: all 0.1s ease;


    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    padding-top: 0.5vw;

}



#navbar a{
    text-align: center;
    line-height:0;
    text-decoration: none;
    font-size: 1.1vw;
    font-family: poppins;
    font-weight: 100;
    font-style: normal;
    color: #ffffff;

    transition: all 0.25s ease;
}

#navbar a:hover{
    transition: all ease-in-out 300ms;
    cursor: pointer;
    color: rgb(176, 27, 27);
}

#logo{
    position: fixed;
    transform: translate(-45.8vw, 0);
    margin-inline: 3.8vw;
}

#navbar #logo {
    transition: all 0.4s ease;
    color: white;
    font-family: "ivypresto-display", serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2.3vw;
    white-space: nowrap;
    margin-top: -0.4vw;
}

#second{
    position: fixed;
    transform: translate(-5vw, 3.7vh);
}

#navbar #logo-space{
    color: transparent;
    font-family: "ivypresto-display", serif;
    font-weight: 500;
    font-style: normal;
    font-size: 2vw;
    margin-top: -0.4vw;
}


#link, #link1, #link2, #link3, #link4, #link5{
    margin-inline: 3.8vw;
}

#link4-1{
    margin-inline: 0.1vw;
}

#link5{
    font-size: 1.25vw;
    white-space: nowrap;
    background-color: rgb(219, 123, 41);
    padding: 0.5vw;

}

#link5:hover{
    background-color: rgba(253, 234, 26, 0.412);
    transition: all 1.5s ease-in-out;
}






/*DROPDOWN SERVICES MENU*/
.dropdown-content {
        text-align: center;
    line-height:0;
    text-decoration: none;
    font-size: 1.1vw;
    font-family: poppins;
    font-weight: 100;
    font-style: normal;
    color: #ffffff;

    transition: opacity 0.5s ease;

    display: block;
    opacity: 0;
    position: fixed;

    transform: translate(26vw, 5.2vh);
    z-index: 99;

    font-size: 1.1vw;
    color: rgb(255, 255, 255);

    height:10.2vh;

    padding-inline: 0.3vw;

    background-color: var(--monk-orange);
}

.dropdown-content span{
    display: flex;
    flex-flow: column nowrap;
    height: 10vh;
    color: #ffffff;
}

.dropdown-content #public-dropdown{
    height: 1.8vh; 
    text-align: left;
    text-decoration: none;
    color: #ffffff;
    transform: translateY(1.6vh);
}

.dropdown-content #org-dropdown{
    transform: translateY(3.3vh);
    text-align: left;
    text-decoration: none;
    color: #ffffff;
}
.dropdown-content #public-dropdown:hover{
    transition: all ease-in-out 300ms;
    cursor: pointer;

    color: rgb(176, 27, 27);
}

.dropdown-content #org-dropdown:hover{
    transition: all ease-in-out 300ms;
    cursor: pointer;

    color: rgb(176, 27, 27);
}

.dropdown-content #sunday-dropdown{
    transform: translateY(6.4vh);
    text-align: left;
    text-decoration: none;
    color: #ffffff;
}


.dropdown-content #sunday-dropdown:hover{
    transition: all ease-in-out 300ms;
    cursor: pointer;

    color: rgb(176, 27, 27);
}

.dropdown:hover .dropdown-content {
    display: block;
}





/* SCROLL STYLING */
.navbar.small {
    background-image: url(../images/nav-background.png);
    background-position: 0vh -15vh;
    background-size: 100%;
    background-repeat: no-repeat;
    padding-bottom: 0vh;

    font-size: 0.85vw;

}









/*BODY*/

body{
    width: 100vw;
    height: auto;
    margin: 0;
}















































/* BUTTON STYLINGS */


button, .button{ /*button class also styles the button on the register form with the .button class*/
    cursor: pointer;
    background-color: #ad200051;
    border: none;
    border-radius: 200px;
    padding:  0.5vw;
    color: white;
    font-family: ivypresto-display, serif;
    font-weight: 100;
    font-style:normal;
    font-size: 1.2vw;
}

.button:hover, button:hover{
    background-color: rgba(253, 234, 26, 0.412);
    transition: all 1.75s ease-in-out;
}



















/*SECOND PAGE*/

.second-page{
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-flow: row nowrap;

    background-color: var(--monk-orange);
}

.second-page .left-side{
    width: 50vw;
    background-image: url(../images/rainbow-tree.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.second-page .right-side{
    width: 50vw;
    display:flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    /* outline: solid 3px red; */
    margin-right: 1vw;
}

.second-page .right-side p{
    padding-inline: 6.5vw;
    color: white;
    font-family: poppins;
    font-weight: 100;
    font-size: 1.25vw;
    text-align: center;
    white-space: pre-wrap;
    margin-top: 0;
}



.second-page .right-side h3{
    color: white;
    font-size: 2.8vw;
    font-family: ivypresto-display, serif;
    font-weight: 100;
    font-style: normal;
    margin-top: 0vh;
    margin-bottom: 0;
}

.second-page .right-side h2{
    color: white;
    font-family: poppins;
    font-weight: 100;
    font-size: 1.25vw;
    margin-top: 1vh;
    margin-bottom: 0vh;
}




/* FORM */

.second-page .right-side form{
    padding-bottom: 2vh;
    text-align: center;
    margin-top: 2vh;
}

.second-page .right-side form input{
    width: 35vw;
    height: 5vh;
    margin-top: 1.6vh;
}

#sendMessage{
    background-color: rgb(219, 123, 41);
}

#sendMessage:hover{
    background-color: rgba(209, 194, 23, 0.804);
    transition: all 1.75s ease-in-out;
}

label{
    color: white;
    font-family: poppins;
    font-weight: 0;
    font-size: 1.25vw;
}



#sendButton{
    margin-top: 2vh;
}


#successMessage, #failureMessage{
        color: white;
    font-family: poppins;
    font-weight: 0;
    font-size: 1vw;
}




















/* FOOTER */
.footer{
    display: flex;
    flex-flow: row nowrap;
    justify-content:baseline;
    align-items: center;
    background-color: var(--lantern-yellow); 

    margin-top: 0;
    margin-bottom: 0;


}

.footer p{
    font-size: 1vw;
    font-family: poppins;
    font-weight: 100;
    color: #ffffff;
    text-align: center;
    font-style: normal;
    transform: translateX(40vw);
    margin: 0 0 0 0;
}

.footer span{
    transform: translateX(65vw);
    font-size: 0.65vw;
}

.footer span a{
    text-decoration: none;
    color: aquamarine;
}


.nav {
    display: none;}

















@media only screen and (max-width: 400px){
    #dropdown-mob-item a{

    font-size: 2.5rem !important;

    }

    #dropdown-mob-item2 a{

    font-size: 2rem !important;

    }
    #ebook-nav-mob a {
        font-size: 2.5rem !important;
    }
}




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


    #dropdown-mob-item2 a{

    font-size: 1.65rem !important;

    }

}


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


    #dropdown-mob-item2 a{

    font-size: 1.45rem !important;

    }
    #ebook-nav-mob a {
        font-size: 2rem !important;
    }
}


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


    #navbar {
        display: none;
    }

    #dropdown-content {
        display: none;
    }

    .menu-btn {
        display: block;
    }

@import url('https://fonts.googleapis.com/css?family=Quicksand:400,500,700');
html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: ivypresto-display, serif;
    font-size: 62.5%;
    font-size: 10px;
}
/*-- Inspiration taken from abdo steif -->
/* --> https://codepen.io/abdosteif/pen/bRoyMb?editors=1100*/

/* Navbar section */

.nav {
    display: block;
    width: 100vw;
    height: 65px;
    position: fixed;
    line-height: 65px;
    text-align: center;
    z-index: 99;


}

.nav div.logo {
    width: auto;
    height: auto;
    inset: 0;
    margin: auto;
    /* margin-top: -3vh; */
}

.nav div.logo a {
    text-decoration: none;
    color: #fff;
    font-size: 2.9rem;
    white-space: nowrap;
}

.nav div.logo a:hover {
    color: rgb(176, 27, 27);
}

.nav div.main_list {
    height: 65px;
    float: right;

}

    .nav div.main_list ul {
        width: 100%;
        height: 100vh;

        display: flex;
        flex-flow: column nowrap;

        background-color: var(--monk-orange);

        list-style: none;
        white-space: nowrap;

        margin: 0;
        padding: 0;
    }

    .nav div.main_list ul li {
        width: auto;
        height: 9.5vh;

        text-align: right;

        padding: 0;
    }

    .nav div.main_list ul li a {
        width: 100%;
        font-size: 2.7rem;
        color: #fff;
        text-align: center;
        text-decoration: none;
        line-height: 65px;
        padding: 20px;
        font-size: 3.5rem;
    }

    #dropdown-mob-item a{
        padding-right: 5vw;
        font-size: 2.55rem;
        white-space: nowrap;
    }

    #dropdown-mob-item2 a{
        padding-right: 5vw;
        font-size: 2.25rem;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    #ebook-nav-mob a {
    font-size: 3.25rem;
    }

    .nav div.main_list ul li a:hover {
        color: rgb(176, 27, 27);
    }

/* Home section */

.navTrigger {
    display: none;
}

.nav {
    padding-top: 0px;
    padding-bottom: 20px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

    .navTrigger {
        display: block;
    }

    .nav div.main_list {
        width: 100%;
        height: 0;
        overflow: hidden;
    }
    .nav div.show_list {
        height: auto;
        display: none;
    }
  
    .nav div.media_button {
        display: block;
    }


/* Animation */
/* Inspiration taken from Dicson https://codemyui.com/simple-hamburger-menu-x-mark-animation/ */

.navTrigger {
    cursor: pointer;
    width: 30px;
    height: 25px;
    margin: auto;
    position: absolute;
    right: 30px;
    top: 7px;
    bottom: 0;
}

.navTrigger i {
    background-color: #fff;
    border-radius: 2px;
    content: '';
    display: block;
    width: 100%;
    height: 4px;
}

.navTrigger i:nth-child(1) {
    -webkit-animation: outT 0.8s backwards;
    animation: outT 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(2) {
    margin: 5px 0;
    -webkit-animation: outM 0.8s backwards;
    animation: outM 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger i:nth-child(3) {
    -webkit-animation: outBtm 0.8s backwards;
    animation: outBtm 0.8s backwards;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

.navTrigger.active i:nth-child(1) {
    -webkit-animation: inT 0.8s forwards;
    animation: inT 0.8s forwards;
}

.navTrigger.active i:nth-child(2) {
    -webkit-animation: inM 0.8s forwards;
    animation: inM 0.8s forwards;
}

.navTrigger.active i:nth-child(3) {
    -webkit-animation: inBtm 0.8s forwards;
    animation: inBtm 0.8s forwards;
}

@-webkit-keyframes inM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes inM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes outM {
    50% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(45deg);
    }
}

@keyframes outM {
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes inT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes inT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes outT {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(9px) rotate(135deg);
    }
}

@keyframes outT {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(9px) rotate(0deg);
    }
    100% {
        transform: translateY(9px) rotate(135deg);
    }
}

@-webkit-keyframes inBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes inBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

@-webkit-keyframes outBtm {
    0% {
        -webkit-transform: translateY(0px) rotate(0deg);
    }
    50% {
        -webkit-transform: translateY(-9px) rotate(0deg);
    }
    100% {
        -webkit-transform: translateY(-9px) rotate(135deg);
    }
}

@keyframes outBtm {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-9px) rotate(0deg);
    }
    100% {
        transform: translateY(-9px) rotate(135deg);
    }
}

.affix {
    /* padding: 0; */
    background-color: var(--monk-orange)
}

.myH2 {
	text-align:center;
	font-size: 4rem;
}

.myP {
	text-align: justify;
	padding-left:15%;
	padding-right:15%;
	font-size: 20px;
}

#dropdown-mob-item{
    display: none;

}
#dropdown-mob-item2{
    display: none;

}



















/*SECOND PAGE*/

.second-page{
    width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-flow: column nowrap;

    background-color: var(--monk-orange);
}



.second-page .left-side{
    width: 100vw;
    /* background-image: url(../images/rainbow-tree.jpg);
    background-position: center center;
    background-size:cover;
    background-repeat: no-repeat; */

}

.second-page .right-side{
    width: 100vw;
    /*  display:flex;
    flex-flow: column nowrap;
   align-items: center;
    justify-content: center; */

}

.second-page .right-side p{
    padding-inline: 2vw;    font-size: 1.5rem;/* 

    color: white;
    font-family: poppins;
    font-weight: 100;

    text-align: center;
    white-space: pre-wrap; */
}


.second-page .right-side h3{
    /* color: white;

    font-family: ivypresto-display, serif;
    font-weight: 100;
    font-style: normal;

 */    font-size: 2.9rem;    margin-top: 13vh;
    margin-bottom: 3vh;
}


.second-page .right-side h2{
    /* color: white;
    font-family: poppins;
    font-weight: 100;


 */    font-size: 1.25rem;    margin-top: 3vh;
    margin-bottom: 0vh;
} 




/* FORM */
/* 
.second-page .right-side form{
    padding-bottom: 2vh;
    text-align: center;
    margin-top: 2vh;
}

.second-page .right-side form input{
    width: 35vw;
    height: 5vh;

    margin-top: 1.6vh;

}

#sendMessage{
    background-color: rgb(219, 123, 41);
}

#sendMessage:hover{
    background-color: rgba(209, 194, 23, 0.804);
    transition: all 1.75s ease-in-out;
}

label{
    color: white;
    font-family: poppins;
    font-weight: 0;
    font-size: 1.25vw;
}



#sendButton{
    margin-top: 2vh;
}
*/

#successMessage, #failureMessage{
        /* color: white;
    font-family: poppins;
    font-weight: 0; */

    font-size: 1.9vw;
} 







button, .button{ /*button class also styles the button on the register form with the .button class*/
    /* cursor: pointer;
    background-color: #ad200051;
    border: none;
    border-radius: 200px; */
    padding:  3vw;
    /* color: white;
    font-family: ivypresto-display, serif;
    font-weight: 100;
    font-style:normal; */

    font-size: 6.5vw;

}








/* MOBILE FOOTER */

.footer p{
    font-size: 2.5vw;
    transform: unset;
    inset: 0;
    margin: auto;
}
}