@charset "UTF-8";
body { background:white; font-family:Arial, Helvetica, sans-serif, cursive, serif; color:#483C32 /*color:#776c65*/; max-width:1280px; margin: 0 auto ; /*padding: 0 auto ;*/ line-height:1.3em}
h1, h2, h3, p, a { padding:0; margin:0; text-decoration:none; color:#483C32 /*color:#776c65*/}
tr { vertical-align:top}
/*.logo {position: fixed; z-index: 30; display: flex; top: 0.5em; left: 0.5em; right: 0 }*//*; margin: 0 auto*/
.logo {position: fixed; z-index: 30; display: flex; left: 5px; right: 0; background: white }/*; margin: 0 auto*/
/*.logo a img {width:36vw; padding: 2vh 0.5vw 0 .1vh; max-width: 23em }*/ /*; float: left*/
.logo a img {width: clamp(3em, 90%, 30rem); padding: 2vh 0.5vw 0 .1vh; max-width: 23em } /*; float: left*/
/*.logo a img { min-width:12em; max-width: 54.2em; width:48% }*/ /*; float: left*/

body#home a#home, body#about a#about, body#believe a#believe, body#vision a#vision, body#kids a#kids, body#community a#community, body#mission a#mission, 
body#contact a#contact, body#resource a#resource, body#sermon a#sermon, body#devotions a#devotions, body#links a#links, body#studies a#studies, body#links 
a#links, body#constitution a#constitution, body#maori a#maori, body#home a#home, body#english a#english, body#childrenspolicy a#childrenspolicy {color: #bf311a; background: white; border-radius: 0.3em}

.audio {box-shadow: .5em .5em 2em rgba( 0, 0, 0, 0.8); border-radius: 40px; transform: scale(1.05); margin:0 1em 0 1em; max-width:100%;}
.video {box-shadow: .5em .5em 2em rgba( 0, 0, 0, 0.8); border-radius: 20px; transform: scale(1.05); margin:0 1em 0 1em; max-width:100%;}
.vidshave {width: 100% } /* For video on index.php only */
/* Menu Styling */
#nav, #nav li { /*color: black;*/ position: relative; z-index:20; font-weight: bold }
#nav ul {list-style: none ; display: table ;margin:0 0 0 0}
#nav > a { display: none }
#nav li a { color: #DDCEBF; display: block }
#nav li a:active { background-color: black !important}
#nav span:after { display: inline-block; position: relative }
#nav > ul { background-color: white }
#nav > ul > li { padding: 0 .5em 0 .5em; float: left }
#nav > ul > li > a { color: #483C32 /*black*/; background: white } /* Changed from #776c65 29/04/2024 */
#nav > ul > li :not( :last-child ) > a { color: white }
#nav > ul > li:hover > a, #nav > ul:not( :hover) > li.active > a { color: #bf311a} /* Hyperlink indicator */
#nav li ul { display: none; position: absolute }
#nav li:hover ul { display: block; background-color: #483C32 /*#757575*/; color: white; border-radius: 0.3em; padding: 10%; width:6.4em; line-height: 150%} /* Secondary menu */
#nav li ul a { color: white}
#nav li ul li a:hover, #nav li ul:not( :hover ) li.active a { background-color: white; color: #bf311a; border-radius: 0.2em}

	
/* Flexbox Control */
.main { display: flex; flex-flow: row wrap; justify-content: space-evenly; margin:2em 0 0.1em 0.5em }
.box { flex: 1 1 inherit ; text-align: center ; padding: 0 0 4em 0 }
.box img {border-radius:0.3em; border-style: inset; border-left: none; border-width: .2em; border-top:none; border-color: #776c65; max-width:10em; margin:0 1.5em 1em 1.5em }
.box1 { flex: 0 1 auto ; padding: .5em .5em .5em .5em }
.box1 img {border-radius:0.3em; border-width: .2em; max-width:10em; flex-shrink: 10}
.box2 {flex: 1 1 inherit ; background:#FFF; margin:auto; width: 85%}/* Edge Lift Shadow Box Effect */
.box3 {border-style: groove; border-width: .1em; border-color: #e6e6e6}
.ftable { display: flex }
.box4 {flex: 0 0 22%; background-color:grey; opacity:0.8; color:white}
.box5 {flex: 0 0 22% }
.box6 { flex: 0 1 auto ; padding: .5em .5em .5em .5em ; text-align: center }/*box 1 with center align text*/
.box6 img {border-radius:0.3em; border-width: .2em; max-width:10em; flex-shrink: 10}/*box 1 with center align text*/
.box7 { flex: 0 1 auto; } /*box1 without padding*/
.box8 { display: flex; flex-flow: row wrap; justify-content: space-between; margin-top: clamp(1.8em, 4em, 4.5em) ; /*font-size: clamp(.6rem, .9751vw + .5087rem, 1rem);*/ line-height:1.8em } /* Index centre section */
.flex-item1 {font-size: clamp(.8rem, .9751vw + .5087rem, 1.24rem); margin: 9cqw 3.2cqw 0 .5cqw}  /* index page centre left band */
.flex-item2 {margin-top: 5em}  /* index page centre right band */


/*.disp30 {flex: 0 0 32%; margin:0 0 0 .2em } */      /* index page centre left band */
.disp30 {flex: 0 0 32%; margin-left:.2em }       /* index page centre left band */
/*.disp70 {flex: 0 0 70.2%; justify-content: right}*/   /* index page centre right band */
.disp70 { justify-content: right}   /* index page centre right band */
.bottom { position: relative;}
.bottom:before, .bottom:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 1.1em; width: 50%; top: 15px; background: #777; box-shadow: 0 20px 10px #777; transform: rotate(-.7deg);}
.bottom:after { transform: rotate(.7deg); right: 1.1em; left: auto;}
/* End of Flexbox Control */

.oval {
  width: 4em;
  height: 2em;
  background: #a84909;
  border-radius: 50%;
  }
.fb { text-align: right}

.hover span{background:none repeat scroll 0 0 #F8F8F8;border:.3em solid #DFDFDF;color:#717171;position: relative ;top:-2em;left:0;display: none ;padding:0 .5em 0 .5em; height :7em}
.hover p:hover span{display: block ;height:7em}

#arrow-right {width:0;height:0;border-top:.6em solid transparent;border-bottom:.6em solid transparent;border-left:1em solid #776c65;}
#arrow-down {width:0;height: 2em;border-left: .6em solid transparent;border-right: .6em solid transparent;border-top: .6em solid #776c65;}

/* Small Viewport Control */
@media only screen and ( max-width: 1000px)
{html
  body { margin: 0 auto }
  #nav > a  { width: 2.5em; height: 2.5em; text-align: left; background-color: #483C32; text-indent: -9999px; position: relative; margin:0.2vh 0 0 1vw} /* Menu button */
  #nav > a:before, #nav > a:after { position: absolute; border: 0.125em solid #fff; top: 35%; left: 35%; right: 25%; content: ''} /* Menu button decoration */
  #nav > a:after { top: 60%}
  #nav:not( :target ) > a:first-of-type, #nav:target > a:last-of-type { display: block}
  #nav > ul { height: auto; display: none; position: absolute; z-index:20; padding: 0 0 1em 0; margin-left: -5em} /* 1st level */
  #nav:target > ul { display: block}
  #nav > ul > li { width: 80%; float: none}
  #nav > ul > li > a { height: auto; text-align: left}
  #nav > ul > li:not( :last-child ) > a { border-right: none; border-bottom: 1px solid #cc470d}
  #nav li:hover ul { display: block; background-color: #483C32; color: white; border-radius: 0.3em; padding: 10%; width:6.4em; line-height: 200%} /* 2nd level */
  #nav li ul { position: static; text-align: left; margin-left: -3em}
  .fb img {max-height:.7em;}
}
/* End of Small Device Control */

.wrapper {max-width: 100%;margin: 0 auto 0 auto;display: -ms-grid;-ms-grid-columns: auto (1fr 0) [12] ;-ms-grid-rows: auto 1fr;display: grid;grid-columns: repeat(12, 1fr)}
.col {border: 0; margin:0 0 0 0}
.col img {border-radius:0.3em; border-style: inset; border-left: none; border-width: .2em; border-top:none; border-color: #776c65; max-width:10em; margin:0 1.5em 1em 1.5em}
.span2 { -ms-grid-column-span: auto / span 2; grid-column: auto / span 2;}
.span3 { -ms-grid-column-span: auto / span 3; grid-column: auto / span 3;}
.span4 { -ms-grid-column-span: auto / span 4; grid-column: auto / span 4;}
.span5 { -ms-grid-column-span: auto / span 5; grid-column: auto / span 5;}
.span6 { -ms-grid-column-span: auto / span 6; grid-column: auto / span 6;}
.span7 { -ms-grid-column-span: auto / span 7; grid-column: auto / span 7;}
.span8 { -ms-grid-column-span: auto / span 8; grid-column: auto / span 8;}
.span9 { -ms-grid-column-span: auto / span 9; grid-column: auto / span 9;}
.span10 { -ms-grid-column-span: auto / span 10; grid-column: auto / span 10;}
.span11 { -ms-grid-column-span: auto / span 11; grid-column: auto / span 11;}
.span12 { -ms-grid-column-span: auto / span 12; grid-column: auto / span 12;}


.band {position:relative; background: #483C32; font-size: clamp(1rem, -0.2174rem + 3.4783vw, 2rem); padding:2vh 0.2vw 1vh 0.2vw; line-height:1.3em; text-align:center}
.band p, .band a, .band h1, .band h2 {color: white; font-family: Helvetica}


.title {font-size: 120%;text-align:center; padding:4.2em 0 2em 0;line-height:1.5em}
.center { display:inline-block; margin: 0 auto 0 auto ; padding: 0 15% 0 15%; width:70%; text-align:center;background: white}
.center a { padding: 0 1% 0 1%}
.circle { content: ""; width: 5em; height: 5em; background: #2b6ca3; -moz-border-radius: 10em; -webkit-border-radius: 10em; border-radius: 10em}
.hexagon { width: 8em; background: #3d9be9; position: relative}
.hexagon:before { content: ""; position: absolute; top: -60%; left: 0; width: 0; height:0; border-left: 4em solid transparent; border-right: 4em solid transparent; border-bottom: 3em solid #3d9be9}
.hexagon:after { content: ""; position: absolute; bottom: -60%; left: 0; width: 0;height: 0; border-left: 4em solid transparent; border-right: 4em solid transparent; border-top: 3em solid #3d9be9}
#curvedarrow {position:relative;bottom:0;left:-1.4em;width:0;height:0;border-left:.5em solid transparent;border-right:.5em solid transparent;border-top:.5em solid #776c65;-webkit-transform: rotate(10deg);-moz-transform:rotate(10deg);-ms-transform:rotate(10deg);-o-transform:rotate(10deg);transform:rotate(10deg)}
#curvedarrow:after {content:"";position:absolute;border:0 solid transparent;border-top:3px solid #776c65;border-radius:20px 0 0 0;top:-1em;left:-0.8em;width:12px;height:12px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform: rotate(45deg);}
.link a { padding:0 0.625em 0 0.625em; font-weight :bold; letter-spacing:normal}
.link a:hover { color:white; background: #776c65; border-radius:2em; padding:0 0.625em 0 0.625em}
.linkrev a { color:white; padding:0 0.625em 0 0.625em; font-weight :bold; letter-spacing:normal}
.linkrev a:hover {  color: black; background: white; border-radius:2em; padding:0 0.625em 0 0.625em}


.fadein {position: relative; z-index:-10; margin: 0 0 48.5% 0.4em; display: flex; justify-content: center;}

.fadein displayed {position: absolute}


.resize {width: 100%}
.fadein img {animation-name: fade; animation-iteration-count: infinite; animation-duration: 36s;}


@keyframes fade         { 0% {opacity:1;} 17% {opacity:1;} 25% {opacity:0;} 92% {opacity:0;} 100% {opacity:1;}}
#f1 {animation-delay: 0s}
#f2 {animation-delay:-28s}
#f3 {animation-delay:-24s}
#f4 {animation-delay:-20s}
#f5 {animation-delay:-16s}
#f6 {animation-delay:-12s}
#f7 {animation-delay:-8s}
#f8 {animation-delay:-4s}