@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);
    --x: x_of_title;
}
* {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: translate(0, 2.9vh);
    text-align: left;
    text-decoration: none;
    color: #ffffff;
    transform: translateY(3.3vh);
}
.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;

    margin: 0 0 0 0;


    font-size: 1vw;
    font-family: poppins;
    font-weight: 100;
    color: #ffffff;
    text-align: center;
}














































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;
}







.register{
    background-image: url(../images/register-brendan.JPG);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center top;

    color: white;
    font-size: 4vw;
    font-family: ivypresto-display, serif;
    font-weight: 100;
    text-align: center;

    height: 100vh;
}





#register-row{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;

}

#register-row form{
    grid-column: 3/3;

    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25vw;

    transform: translate(1vw, -7vh);
}


#register-row p{
    grid-column: 2/2;
    /* transform: translateX(-1vw);
    transform: translateY(1vw); */
    padding-inline: 2vw;

    color: white;
    font-family: poppins;
    font-weight: 0;
    font-size: 1.25vw;
    text-align: center;
    width: 35vw;
    white-space: pre-wrap;
}


label, input, textarea {
  margin-bottom: 10px;
    width:15vw;
    height: 4vh;
    border-radius: 5px;

}

.register textarea{
    width:25vw;
    height:17vh;
}

input[type="submit"] {
    width:8vw;
    height: 5vh;

    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    padding-bottom:0;
}

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

    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    padding-bottom:0;
}



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

}

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


#messageSent{
    color: rgb(225, 236, 171);
    font-family: poppins;
    font-size: 1.25vw;
    margin-top: 2.25vh;
}








#mob-register-h3{
    display: none;


}






















/* FOOTER */
.desktop-footer{

    background-color: var(--monk-orange); 
    margin-top: 0;
    margin-bottom: 0;
}

.desktop-footer p{
    display: block;
    font-size: 1vw;
    font-family: poppins;
    font-weight: 100;
    color: #ffffff;
    text-align: center;
    font-style: normal;
    margin: 0 0 0 0;
}

.mob-footer{display: none;}






.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;

}






button, .button{
    font-size: 6.5vw;
    padding:  3vw;
}










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:7.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: translate(0, 2.9vh);
    text-align: left;
    text-decoration: none;
    color: #ffffff;
    transform: translateY(3.3vh);
}
.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: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 MOB*/

body{
    /* width: 100vw;

    margin: 0 0 0 0;


    font-size: 1vw;
    font-family: poppins;
    font-weight: 100;
    color: #ffffff;
    text-align: center; */

display: flex;
flex-flow: column nowrap;
}



button, .button{ 
    /* 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: 2rem;
}

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



.register{
    /* 

    background-repeat: no-repeat;
    background-position: center top;
 
    font-family: ivypresto-display, serif;
    font-weight: 100;
    text-align: center;
    height: 100vh; */    padding-top: 54vh;
   color: transparent;
    background-image: url(./register-brendan-mob2.jpg);
    background-size: 200%;
}


#register-row p{
     grid-column: unset;


/*    color: white;
    font-family: poppins;
    font-weight: 0;
    text-align: center;

    white-space: pre-wrap; */    font-size: 1.5rem;        width: 95vw;
    background-color:#d88c3a;

    border-radius: 25px;

    padding: 10vw;
}





#mob-register-h3{
    display: block;
    font-size: 4.5rem;
        color: white;
    font-family: ivypresto-display, serif;
    font-weight: 100;
    text-align: center;
    margin-bottom: 1.5vh;
}

#register-row{
    /* 
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr; */
    display: unset;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#register-row form{
    /* grid-column: 3/3;

    display: flex;
    flex-direction: column;
    align-items: center;

 */    width: 95vw;    transform: translate(0, 0);

    background-color:rgb(49, 85, 23);
    border-radius: 50px;
}



label, input, textarea {
  /* margin-bottom: 10px;

    border-radius: 5px; */    width:85vw;
    height: 4vh;

    border-radius: 25px; 
}

.register textarea{
    width: 85vw;
    height:25vh;

    padding: 3vw;
}

input[type="submit"] {
    /* 
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    padding-bottom:0; */width:25vw;
    height: 5vh;
}

label{
    /* color: white;
    font-family: poppins;


    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    padding-bottom:0; */    font-size: 1.5rem;
}



#sendMessage{
    /* background-color: rgb(219, 123, 41);
    color: white; */

}

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


#messageSent{
    /* color: rgb(225, 236, 171);
    font-family: poppins;

   */    font-size: 2rem;  margin-top: 1vh;
 margin-bottom: 1vh;
}




    #navbar {
        display: none;
    }



/* FOOTER */
.desktop-footer{display: none;}

.mob-footer{
    display: flex;
    flex-flow: row nowrap;
    justify-content:baseline;
    align-items: center;
    background-color: var(--monk-orange); 

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

    transform: unset;
    margin-top: 2vh;
}

.mob-footer p{
    font-size: 2.5vw;
    font-family: poppins;
    font-weight: 100;
    color: #ffffff;
    text-align: center;
    font-style: normal;
    transform: unset;


    inset: 0;
    margin: auto;
}




}