/* Website template: Home, About, Page 1, Page 2, Page 3, Contact */
/* Gary Steven */
/* Started: 4th April 2021 */


/*  ------------------------------------ */
/*  CSS Variables */
/*  ------------------------------------- */
/* COLOURS, FONT-FAMILY */
:root {

--primary-colour:  #CDD3D1;

--secondary-colour:  #14140B;

--dark-grey: #708080;

--light-grey: #CDD3D1;

--accent-colour:  #50343A;

--topic-1-colour: #3A4504;

--topic-2-colour: #3A4504;

--topic-3-colour: #3A4504;

--text-in-pic-colour: rgba(255, 255, 255, 1);

--main-text-colour: var(--dark-grey);
/* Main font */
--main-font: 'Libre Baskerville', serif;
/* Header font */
--header-font: 'Mate SC', serif;

--index-cover-img: url('../images/cover.jpg');
--topic1-img: url(../images/topic1.jpg);
--topic2-img: url(../images/topic2.jpg);
--topic3-img: url(../images/topic3.jpg);

--staff-img: url(../images/staff.jpg);

--topic1-banner: url("../images/topic1/topic1Banner.jpg");
--topic2-banner: url("../images/topic2/topic2Banner.jpg");
--topic3-banner: url("../images/topic3/topic3Banner.jpg");

--topic1-item1-img: url(../images/topic1/item1.jpg);
--topic1-item2-img: url(../images/topic1/item2.jpg);
--topic1-item3-img: url(../images/topic1/item3.jpg);
--topic1-item4-img: url(../images/topic1/item4.jpg);

--topic2-item1-img: url(../images/topic2/item1.jpg);
--topic2-item2-img: url(../images/topic2/item2.jpg);
--topic2-item3-img: url(../images/topic2/item3.jpg);
--topic2-item4-img: url(../images/topic2/item4.jpg);

--topic3-item1-img: url(../images/topic3/item1.jpg);
--topic3-item2-img: url(../images/topic3/item2.jpg);
--topic3-item3-img: url(../images/topic3/item3.jpg);
--topic3-item4-img: url(../images/topic3/item4.jpg);
}
/* ----------------------------------------- */

* {
  box-sizing: border-box;
}

.body * {
  padding: 0;
  margin: 0;
}

/* ---------------------- */
/* TEXT STYLES */
body {
    display: flex;
    flex-direction: column;
    width: 100vw;
    color: var(--main-text-colour);
    font-family: var(--main-font);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

h1 {
    font-size: 3em;
    padding: 0;
    margin: 0;
    font-family: var(--header-font);
    color: var(--primary-colour);
    opacity: .8;
}

h2 {
    font-size: 3em;
    padding: 0;
    margin: 0;
    font-family: var(--header-font);
    color: var(--secondary-colour);
}

h3 {
    font-size: 2em;
    padding: 0;
    margin: 1em;
    font-family: var(--main-font);
    color: var(--accent-colour);
}

p {
    padding: 0;
    margin: 0;
    color: var(--main-text-colour);
    text-indent: 5ch;
}

h3 + p {
    text-indent: 0;
}

h3 + p:first-letter{
    float: left;
    font-weight: bold;
    color: white;
    font-size: 400%;
    line-height: 100%;
    padding: 0 1rem 0.5rem 1rem;
    margin: 0 .5rem 0.5rem .5rem;
    background: var(--accent-colour);
  }



.main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0 auto;
    width: 80%;
    padding: 2rem;
    /* background: lightgrey; */
}

.text-container:after {
    background-image: linear-gradient(90deg, var(--text-in-pic-colour) 0%, var(--topic-1-colour) 25%, var(--topic-2-colour) 50%, var(--topic-3-colour) 75%, var(--text-in-pic-colour) 100%);
    content: ' ';
    width: 50%;
    margin: 1rem auto 0 auto;
    height: 2px;
    /* z-index: 1; */
}

.text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 75%;
    max-width: 80ch;
    /* margin: 1rem 0 1rem 0;
    padding: 1rem; */
    white-space: pre-wrap;
    /* border: 1px solid #0A317A; */
    /* border-radius: 2%; */
    overflow: visible;
}

/* ---------------------------------------------- */

/* --------------------------------------------- */
/* ALL PAGES */


nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 10vh;
    position: fixed;
    top: 0;
    background-color: var(--primary-colour);
    font-family: var(--header-font);
    z-index: 50;
    /* border: 2px solid pink; */
}

.transparent-nav {
  background-color: rgba(0,0,0,0);
  /* Transparent = rgba(0,0,0,0) / Translucent = (0,0,0,0.5)  */
  transition: background-color 1s ease 0s;
}

.opaque {
  background-color: var(--primary-colour);
  transition: background-color 1s ease 0s;
}


nav img {
    height: 10vh;
    margin-right: auto;
}

#logoSmall {
    display: none;
}

nav a,  #burgerMenu a {
    color: var(--secondary-colour);
    opacity: .8;
    font-size: 1.5em;
    padding: 1em;
    text-decoration: none;
}

nav a:hover, #burger:hover, #burgerMenu a:hover {
    color: var(--accent-colour);
}

.active {
    color: var(--accent-colour);
    }

.active:hover {
    color: var(--accent-colour);
}

.address {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 3vw;
    text-align: center;
}

footer {
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: var(--primary-colour);
    opacity: .8;
}

footer img {
    height: 10vh;
    padding-right: 2vw;
}

/* ---------------------- */
/* INDEX PAGE */

.header {
  background-image: var(--index-cover-img);
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header h1 {
    margin-top: 40vh;
    font-size: 6vw;
    opacity: .8;
    /* border: dashed 2px pink; */
}

.header h2 {
    margin-bottom: 30vh;
    font-size: 4vw;
    opacity: .8;
    /* border: dashed 2px pink; */
}

.comment {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 5em 0;
    align-items: center;
    justify-content: center;
    background-color: var(--text-in-pic-colour);
    color: var(--secondary-colour);
}

.comment h2 {
    padding: 2em;
    font-size: 2vw;
    font-family: var(--main-font);
    font-weight: lighter;
}

.name {
    font-size: 75%;
    font-family: var(--header-font);
}

.comment:after, .comment:before {
    background-image: linear-gradient(90deg, var(--text-in-pic-colour) 0%, var(--topic-1-colour) 25%, var(--topic-2-colour) 50%, var(--topic-3-colour) 75%, var(--text-in-pic-colour) 100%);
    content: ' ';
    width: 50vw;
    height: 2px;
    z-index: 1;
}

.flex-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0;
    padding: 0;
    /* border: 3px dashed pink; */
}

/* Animated text reveal on hover from 'Codenewbies' on youtube: https://www.youtube.com/watch?v=OpK8DTTVnL0 */
.img_area_topic1, .img_area_topic2, .img_area_topic3 {
    flex: 30%;
    height: 50vh;
    margin: 0;
    padding: .5em;
    /* background-color: grey; */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* border: solid 5px #cdcdcd; */
    position: relative;
    overflow: hidden;
}

.add_img_topic1 {
    background-image: var(--topic1-img);
}

.add_img_topic2 {
    background-image: var(--topic2-img);
}

.add_img_topic3 {
    background-image: var(--topic3-img);
}

.add_img_topic4 {
    background-image: var(--topic4-img);
}

.img_area_topic1:before, .img_area_topic2:before, .img_area_topic3:before, .img_area_topic1:after, .img_area_topic2:after, .img_area_topic3:after {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: '';
    position: absolute;
    transition: 1s;
}

.img_area_topic1:after, .img_area_topic2:after, .img_area_topic3:after {
    padding: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--header-font);
    color: var(--accent-colour);
    font-size: 3vw;
    opacity: .5;
    transform: translateY(100%);
    transition-timing-function: ease-out;
    content: attr(data-text);
}

.img_area_topic1:after {
    background-color: var(--primary-colour);
    }

.img_area_topic2:after {
    background-color: var(--primary-colour);
    }

.img_area_topic3:after {
    background-color: var(--primary-colour)
}

.img_area_topic1:hover:after, .img_area_topic2:hover:after, .img_area_topic3:hover:after {
    transform: translateY(0%);
}


/* ---------------------- */
/* SITE AND STAFF PAGE */

.pic_and_text {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin: 0;
    /* border: 3px dashed pink; */
}

.pic_and_text.about {
    padding: 15vh 0 10vh 0;
}

.text {
    display: flex;
    flex: 50%;
    flex-direction: column;
    align-items: center;
    padding-left: 5em;
    padding-right: 5em;
}

.text h1 {
    font-size: 6vw;
    opacity: .8;
    /* border: dashed 2px pink; */
}

.text p {
    color: var(--main-text-colour);
    opacity: .6;
}

.pic {
    flex: 50%;
    height: 50vh;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-color: var(--light-grey);
    background-position: center center;
    background-repeat: no-repeat;
    /* border: solid 5px pink; */
    position: relative;
}

.staff {
    background-image: var(--staff-img);
}

.left {
    order: 1;
}

.right {
    order: 2;
}

.row {
    width: 100%;
    height: 80vh;
}

.row:before {
    background-image: linear-gradient(90deg, var(--text-in-pic-colour) 0%, var(--topic-1-colour) 25%, var(--topic-2-colour) 50%, var(--topic-3-colour) 75%, var(--text-in-pic-colour) 100%);
    position: absolute;
    left: 25vw;
    content: ' ';
    width: 50vw;
    height: 2px;
    z-index: 1;
}

.card {
    margin: 2em;
    background-color: var(--primary-colour);
    opacity: .8;
    color: var(--accent-colour);
}


/* ---------------------- */
/* TOPIC 1 PAGE */
.banner {
    background-image: var(--topic1-banner);
    height: 50vh;
    margin-top: 10vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.banner h1 {
    margin-top: 10vh;
    font-size: 6vw;
    opacity: .8;
    /* border: dashed 2px pink; */
}

#topic1_banner {
    background-image: var(--topic1-banner);
}

.topic1item1 {
    background-image: var(--topic1-item1-img);
}

.topic1item2 {
    background-image: var(--topic1-item2-img);
}

.topic1item3 {
    background-image: var(--topic1-item3-img);
}

.topic1item4 {
    background-image: var(--topic1-item4-img);
}


/* ---------------------- */
/* TOPIC 2 PAGE */

#topic2_banner {
    background-image: var(--topic2-banner);
}

.topic2item1 {
    background-image: var(--topic2-item1-img);
}

.topic2item2 {
    background-image: var(--topic2-item2-img);
}

.topic2item3 {
    background-image: var(--topic2-item3-img);
}

/* ---------------------- */
/* TOPIC 3 PAGE */
#topic3_banner {
    background-image: var(--topic3-banner);
}

.topic3item1 {
    background-image: var(--topic3-item1-img);
    background-position: top;
}

.topic3item2 {
    background-image: var(--topic3-item2-img);
    background-position: top;
}

.topic3item3 {
    background-image: var(--topic3-item3-img);
    background-position: center;
}
/* ---------------------- */
/* CONTACT PAGE */

.top_space {
    padding-top: 15vh;
}

.contact_text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 5vh;
}

iframe {
     width: 50%;
     margin: 20px auto;
     display: block;
 }

 input {
     width: 100%;
     margin-bottom: 20px;
     padding-top: 5px;
     padding-bottom: 5px;
 }

 #submit {
     background-color: var(--accent-colour);
     opacity: .8;
     color: var(--light-grey);
     border: none;
     padding: 16px 32px;
     margin: 5px 5px;
 }

.container {
    width: 100%;
}

 form {
     width: 50%;
     background-color: var(--primary-colour);
     opacity: .8;
     margin-left:auto;
     margin-right: auto;
     padding: 1rem;
     border-radius: 1%;
 }

 .form-group * {
     width: 100%;
 }



/* ---------------------- */
/* RESPONSIVE SETTINGS */

@media (max-width: 900px) {

nav a {
    padding: .3em;
}

}

@media (max-width: 767px) {

nav a {
    padding: .3em;
    font-size: 1em;
}

#logoSmall {
    display: flex;
}

#logo {
    display: none;
}

.flex-container, .pic_and_text {
    flex-direction: column;
    height: 100vh;
}

.pic {
    order: 1;
}

.text {
    order: 2;
}

.pic_and_text.about .pic {
    padding-top: 40vh;
}



.img_area_topic1:after, .img_area_topic2:after, .img_area_topic3:after {
    font-size: 2em;
}
}

/* Check device for hover capability (assumption: no pointer --> touch screen). */
/* For touch screens, bring up the pseudo element on page load rather than on hover. */
@media (pointer: none), (pointer: coarse) {
    .img_area_topic1:after, .img_area_topic2:after, .img_area_topic3:after {
        transform: translateY(0%);
    }

}

/* ------------------------------------- */
/* ------- CSS for Image Slider ----- */
/* ----------------------------------------- */
.image-slider {
    display: flex;
    height: 80vh;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    /* Below CSS is for debugging purposes */
    /* This CSS block is not reaching the php file or vice versa. */
}

#slides {
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}

.slide{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    background-size: cover !important;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;
}
.slide::after {
    /* padding: 65px; */
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--header-font);
    color: var(--primary-colour);
    font-size: 5vw;
    opacity: .8;
    /* transition-timing-function: ease-out; */
    content: attr(data-text);
}

.showing{
    opacity: 1;
    z-index: 2;
}
.slide:nth-of-type(1){
    background: url("/images/topic1/topic1Banner.jpg") no-repeat top;
}
.slide:nth-of-type(2){
    background: url("/images/topic2/topic2Banner.jpg") no-repeat top;
}
.slide:nth-of-type(3){
    background: url("/images/topic3/topic3Banner.jpg") no-repeat center;
}


/* END of CSS for Image Slider */
/* --------------------------------------- */

/* -------------------------- */
/* CSS for ROTATING WORDS HEADER */
/* ---------------------------- */
.hero-image {
  background-image: var(--index-cover-img);
  background-color: #cccccc;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position:relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.hero-text {
  text-align: center;
  position: absolute;
  /* top: 50%;
  left: 30%; */
  transform: translate(-50%, -50%);
}

/* Rotating words */
.rw-wrapper{
	width: 100%;
	position: relative;
	margin: 110px auto 0 auto;
	padding: 10px;
}
.rw-sentence{
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
}
.rw-sentence span{
	/* color: lightgrey; */
	font-size: 100%;
	font-weight: normal;
}
.rw-words{
	display: inline;
	text-indent: 10px;
}
.rw-words span{
	position: absolute;
	opacity: 0;
	overflow: hidden;
	/* color: lightgrey; */
	-webkit-animation: rotateWord 9s linear infinite 0s;
	-ms-animation: rotateWord 9s linear infinite 0s;
	animation: rotateWord 9s linear infinite 0s;
}
.rw-words span:nth-child(2) {
    -webkit-animation-delay: 3s;
	-ms-animation-delay: 3s;
	animation-delay: 3s;
	/* color: lightgrey; */
}
.rw-words span:nth-child(3) {
    -webkit-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 6s;
	/* color: lightgrey; */
}
/* .rw-words span:nth-child(4) {
    -webkit-animation-delay: 9s;
	-ms-animation-delay: 9s;
	animation-delay: 9s;
	/* color: lightgrey;
}  */
/* .rw-words span:nth-child(5) {
    -webkit-animation-delay: 12s;
	-ms-animation-delay: 12s;
	animation-delay: 12s;
	color: lightgrey;
}
.rw-words span:nth-child(6) {
    -webkit-animation-delay: 15s;
	-ms-animation-delay: 15s;
	animation-delay: 15s;
	color: lightgrey; */
}
@-webkit-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); }
	5% { opacity: 1; -webkit-transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); }
	20% { opacity: 0; -webkit-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@-ms-keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -ms-transform: translateY(-30px); }
	5% { opacity: 1; -ms-transform: translateY(0px);}
    17% { opacity: 1; -ms-transform: translateY(0px); }
	20% { opacity: 0; -ms-transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes rotateWord {
    0% { opacity: 0; }
    2% { opacity: 0; -webkit-transform: translateY(-30px); transform: translateY(-30px); }
	5% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px);}
    17% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); }
	20% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
	80% { opacity: 0; }
    100% { opacity: 0; }
}
@media screen and (max-width: 768px){
	.rw-sentence { font-size: 5vw; }
}
@media screen and (max-width: 400px){
	.rw-sentence { font-size: 5vw }
}

/* END of CSS for ROTATING WORDS HEADER */

/*  CSS for animated fade in and up on load */
/* ANIMATION */
/* Classes */
.fade-in {
  animation: fadeIn 1s linear 1s 1 forwards;
   animation-fill-mode: both;
}

.fade-up {
 animation: fadeUp 1s linear 1s 1 forwards;
  animation-fill-mode: both;
}

/* The animation code */
@keyframes fadeIn {
  0%   {opacity: 0;
        transform: translate(0, -10vh);
        }
  25%  {opacity: .1;
        transform: translate(0, -6vh);
        }
  50%  {opacity: .3;
        transform: translate(0, -3vh);
        }
  100% {opacity: 1;
        transform: translate(0, 0);
        }
}

@keyframes fadeUp {
  0%   {opacity: 0;
        transform: translate(0, 10vh);
        }
  25%  {opacity: .1;
        transform: translate(0, 6vh);
        }
  50%  {opacity: .3;
        transform: translate(0, 3vh);
        }
  100% {opacity: 1;
        transform: translate(0, 0);
        }
}
/*  END of CSS for fade in and fade up on load */

/*  CSS for responsive navbar with burger */

#burger {
  display: none;
  transform-origin: center center;
  /* transform: rotate(90deg); */
  margin-left: auto;
  margin-right: 2em;
  font-size: 5vw;
  cursor: pointer;
  z-index: 99;
}

#close {
  display: none;
  margin-left: auto;
  margin-right: 2em;
  padding: 2vw;
  font-size: 5vw;
  cursor: pointer;
  z-index: 99;
}

#burgerMenu {
  position: fixed;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 3vw;
  list-style: none;
  height: 90vh;
  top: 10vh;
  width: 100%;
  right: -100vw;
  z-index: 98;
}

.open-burger {
  animation: slideInRight 1s ease-out 0s 1 forwards;
  background: var(--dark-grey);
  opacity: .9;
}

.close-burger {
  animation: slideOutRight 1s ease-out 0s 1 forwards;
  background: var(--dark-grey);
  opacity: .9;
}

@keyframes slideInRight {
  0% {transform: translateX(0);}
  100% {transform: translateX(-100vw);}
}
@keyframes slideOutRight {
  0% {transform: translateX(-100vw);}
  100% {transform: translateX(0);}
}


@media only screen and (max-width: 768px) {
  #burger {
   display: flex;
  }
  #burgerMenu {
    display: flex;
  }
  nav a {
    display: none;
  }
}

/* The !important here over-rides the tendency of the display attribute to leave the burger or X on screen after it has been clicked. This way the media query takes precedence.  */
@media only screen and (min-width: 768px) {
  #burger {
   display: none !important;
  }
  #close {
   display: none !important;
  }
  #burgerMenu {
    display: none !important;
  }
  nav a{
    display: flex !important;
  }
}


/* --------------------------------------------- */
/*  ---------- CSS for topic_boxes_fade ----------- */
/* ---------------------------------------------------------- */

.section-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100vw;
  height: 80vh;
}

.fade-container {
  position: relative;
  width: 50%;
  height: 50%;
}

.image-fade{
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: 3s ease;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.text-fade {
    color: black;
    opacity: 0;
    transition: ease 3s;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    text-align: center;
}

.text-fade > h1 {
    font-size: 4vw;
}

.text-fade > p {
    font-size: 2vw;
}

.fade-container:hover .image-fade {
  opacity: 0.3;
}

.fade-container:hover .text-fade {
  opacity: 1;
}

@media(max-width: 700px) {
  .fade-container {
    width: 100%;
  }
}

 @media screen and (hover: none) {
    .fade-container .image-fade {
      opacity: .3;
    }
    .fade-container .text-fade {
      opacity: 1;
    }
}

/* -------------------------------- */
/*  END  topic_boxes_fade */
/*  ---------------------------------- */