@font-face {font-family: "Kefa-Regular";
  src: url("fonts/kefa/b6e1e126bc19c3e9fe26136203746a13.eot"); /* IE9*/
  src: url("fonts/kefa/b6e1e126bc19c3e9fe26136203746a13.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
  url("fonts/kefa/b6e1e126bc19c3e9fe26136203746a13.woff2") format("woff2"), /* chrome、firefox */
  url("fonts/kefa/b6e1e126bc19c3e9fe26136203746a13.woff") format("woff"), /* chrome、firefox */
  url("fonts/kefa/b6e1e126bc19c3e9fe26136203746a13.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url("fonts/kefa/b6e1e126bc19c3e9fe26136203746a13.svg#Kefa-Regular") format("svg"); /* iOS 4.1- */
}

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #FFF8EB;
  font-family:"Kefa-Regular";
  color:#053561;
  /*scroll-snap-type: y mandatory;
  scroll-behavior: smooth;*/

}
body{overflow-y:hidden; }
html{position: fixed;}

#debug{position: fixed;top: 0 left:0; z-index: 200;}
button{cursor: pointer; background: none; border: none; box-sizing: inherit; padding: 0;display: block; font-family: "Kefa-Regular";    color: #053561; font-size: 1em;}
h1{color:#FFFFFFD9;     font-size: 64px;}
.whiteBox h1{color:#A00F30;}
h2 .mainHead{font-size: 3em;}

h2 .subHead{}
.moduleContent{
  position: relative;
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: space-between;
  /*scroll-snap-align: center;*/

}

.quote{font-size: .8em;}
.citation{font-size:.6em;}

.moduleContentBottom{align-items: flex-end;}
.moduleContentCentre{align-items: center;     justify-content: center;}
.moduleScrollBox{    height: calc(100% - 10px); overflow-x: scroll; width: calc(100% + 30px); }

.moduleImageMain{  width: 50%;   text-align: left;margin-bottom: -7px;}
.moduleImageMain img{max-width: 100%;    max-height: 100vh;

}
.moduleTitle, .moduleSpeech{
    flex-grow: 1;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.moduleSpeech{background-color: #053561;     color: #FFF; font-size: 2em;max-width: 50%;}
.moduleSpeechFull{max-width: none;}
.moduleTitleBg{
  background-image: url('../img/bluepaint.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 673px;
  height:766px;
}

.moduleSpeechBg{
  background-image: url('../img/speech.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 673px;
  height:766px;
}
.moduleTitleBox{
  height: 60%;
  margin: 20%;

}
.moduleBadgeContent{align-items: flex-start;}
.moduleBadgeBoxText{    padding: 100px; font-size: 2em;}
.moduleBadgeBoxImage{  margin-top: -100px; margin-right: -150px;   z-index: 1; }
.moduleBadgeBoxImage img{    width: 348px;    height: 348px;}

.centreBox{position: relative; display: flex; justify-content: center; align-items: center; max-width: 70%;    max-height: 100%;}
.centreBoxContent{display: flex; justify-content: center; align-items: center; flex-direction: column;}

.titleBox button{ background: rgb(255,248,235); background: linear-gradient(0deg, rgba(255,248,235,1) 0%, rgba(255,255,255,1) 100%); padding: 20px 50px; border-radius: 6px; margin-bottom: 50px;border:2px solid #FFFFFFD9;}
.titleBox button:hover{background:none; color:#FFFFFFD9; }
.titleBox p{color:#FFFFFFD9; font-size: 24px;}
.titleBox img{}

.creditsBoxContent{width:90%}
.centreBoxContentButtons{display: flex;     width: 100%; justify-content: space-around;}
.centreBoxContentButtons button{min-width: 30%;}
.creditsContent{width:100%}
.credits{    width: 100%;}
.credits h2{color: #FFFFFFD9;}
.credits p{font-size: 18px;}
.credits p.disclaimer{font-size: 12px;}
.credits a{color: #FFFFFFD9;}
.creditsLogos{display: flex; justify-content: center; align-items: center;}
.creditsLogo{padding:1em; max-width: 100%}
.creditsLogo1{height:80px; width:311px;}
.creditsLogo2{height:60px; width:360px; margin-top: 10px;}
.creditsCallToAction{font-size: 2em;}
  .shareButtons{    display: flex;}
.leftText{text-align: left;}
.whiteBox{ background-color: #FFF; opacity: .8; }
.conclusionBox{ opacity: .9; background-color: #e5edf3;}
.boxAnimate{position: relative;  top: 200px; transition: top 1s linear 0s;}

.fontGrow{  transition: font-size 2s;    min-height: 64px; }

.smallSpeechBubble {    position: absolute;
    left: 0;
    top: 0;
    background: #1E1C1D;
    color: #FFF;
    padding: 1em;
    border-radius: 20px; display:none;}
.smallSpeechBubble1{top: 100px;
    left: 30%;
    max-width: 50%;}
.smallSpeechBubble2{top: 200px;
    left: 35%;
    max-width: 50%;}

.paddedContainer{padding: 20vh 0;}

.whoImages{flex-direction: column;}
.whoImages .whoImage{position: relative; top: 200px; }
.whoImage{max-width: 100%;}
.whoImage2, .whoImage3{visibility: hidden;}

.moduleImageWho{}

.parallax {
  height: 100%;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.autoHeight{height: auto; padding: 10vh 0; margin-top: -1px;}
.autoHeightFirst{padding-top:20vh;}
.autoHeightLast{padding-bottom:20vh;margin-top: -1px;}
.scrollContainer{overflow-y: scroll;}
.yellowbg{background-color: #FFF8EB;}

.pinkbg{background-color: #D85E71;}
.bluebg{background-color: #5BA0E1;}
.lightbluebg{background-color: #1799C8;}
.darkbluebg{background-color: #053561; ;}
.greenbg{background-color: #308977;}

.grey1bg{background-color: #D3D3D3;}
.grey2bg{background-color: #B6B4B4;}
.grey3bg{background-color: #979797;}

.texture1{background-image: url('../img/texture1.png'); }
.texture2{background-image: url('../img/texture2.png'); }
.texture3{background-image: url('../img/texture3.png'); }
.village{background-image: url('../img/village.jpg'); }
.village2{background-image: url('../img/village2.jpg'); }

@keyframes animatedBackground { from { background-position: -100px 0; } to { background-position: 100% 0;}}
.skybg{
  background-color: #5B9FE1;
  color:#053561;
  background-image: url('../img/sky.png');
  background-position: 100% 0;
  background-repeat: no-repeat;
  animation: animatedBackground 10s linear;
  height: auto;
  background-attachment: scroll;
  padding-bottom: 20vh;
}



.skybg p, .skybg h1{color:#053561;}
#moduleContent1_2 h1.skyTitle1{position: relative;  top: -200px; opacity:.5;     min-height: 10vh;}
#moduleContent1_2 h1.skyTitle2{opacity:.5; max-width: 95%; }
#moduleContent1_2 h1.skyTitle3{opacity:.5; max-width: 95%; position: relative;  top: 300px;}
#moduleContent1_2 .blueline{border-left: 1px solid #053561;  width: 0;   height: 0px;}
#moduleContent1_2 .bluelineContainer{height: 20vh;}
#moduleContent1_2 .moduleContentCentre{align-items: flex-end;}
#moduleContent1_2 p.bluescroll{opacity:0; min-height: 10vh; display: flex;     align-items: center;}
.skyBox{position: relative;  top: 300px; transition: top 1s linear 0s; padding:50px; min-width: 70%; }
.skyBox p{}
.skyBox .red{color:#A00F30; font-weight: bold; font-size:2em;}
.skyBox .purple{color:#621E44; font-weight: bold; font-size:2em;}
.skyBox .blue{color:#053561; font-weight: bold; font-size:2em;}
@keyframes animatedCloud { from { right:-80%; } to { right:-50%;}}
@keyframes animatedCloud3 { from { left:-50%; } to { left:-35%;}}
.cloud2{width:600px;height: 300px; position: absolute;right: -50%;  z-index: 200;}
.cloud3{width:600px;height: 300px; position: relative;left:-35%; top:-100px;  z-index: 200;}
.birds{display: flex; position: relative;  top: -300px;z-index: 201;left: -200px;}
.bird1{width:110px;height: 133px; position: relative; left:-50px; top:-50px;}
.bird2{width:185px;height: 172px; position: relative; left: 0; top: -100px;}
.bird3{width:133px;height: 159px; position: relative; left: -300px; top: 100px;}

.cloud2 img, .cloud3 img, .bird1 img, .bird2 img, .bird3 img{width:100%; height:auto;}

.scrollSnap{scroll-snap-align: start;}
#audioPlayer, .hiddenAudio {float:left; height:0; visibility:hidden;}

#audioPlayer2_2 {/*float:left; height:0; visibility:hidden;*/position:fixed;bottom: 0;}
#storyMenu{position: fixed; visibility:hidden;
    top: 10vh;
    left: 0;
    background-color:#333; border-radius: 0 30px 30px 0;
    display: flex;
    height: 70vh;
    padding: .5em;     align-items: center;
    flex-direction: column;
    align-content: center;
    justify-content: space-around;     z-index: 100;}
#storyMenu button{width: 30px; height: 30px;  }
#storyMenu button img{width:100%; height:auto; }
.menuModule.active::after{content: "\25c4";  font-size: 1em;  font-weight: 600;  position: relative;  top: -32px;  left: 18px;  color: #C56A82;}

.colour0{color:#FFFFFF;}
.colour1{color:#D85E71;}
.colour2{color:#308977;}
.colour3{color:#1799C8;}

@media screen and (min-width: 1000px) and (max-width: 2000px) {

    }

    @media screen and  (min-width: 768px) and (max-width: 1000px) {
  .moduleBadgeBoxImage img {   width: 200px;   height: 200px;}
  .moduleBadgeBoxImage { margin-top: -100px; }
  .smallSpeechBubble1 ,  .smallSpeechBubble2{    left: 10%; max-width: 30%;}

    }



@media screen and (max-width: 767px) {
  h1 { font-size: 48px;}
.moduleBadgeContent{justify-content: space-between; }
.creditsLogos{flex-direction: column;}
.creditsLogo{padding:0;}
.credits p {font-size:10px!important;}
  .moduleBadgeBoxImage img{    width: 150px;    height: 150px;}
  .centreBox{max-width: 100%;}
  .moduleBadgeBoxText{padding:50px; font-size: 1.2em;}
    .moduleTitleBg, .moduleSpeechBg{width:300px; height:341px;     margin-top: 20%;}
    .moduleSpeechBg{background: none;}
    .moduleSpeech{font-size: 1.2em;  }
    .moduleImageMainTitle{position: absolute;}
    .moduleTitle{    align-items: flex-start;}

    #storyMenu{    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0;
    border-radius: 0 0 0 0;
    height: auto;
    padding: .5em;
    flex-direction: row;
    justify-content: space-evenly;}
    .smallSpeechBubble1 {left: 10px; max-width: 40%;}
    .smallSpeechBubble2 { left: 5%; max-width: 40%;}
    .cloud2, .cloud3, .birds {display:none;}
    .moduleScrollBox{ width:100%;   height: 100%;}
    .centreBoxContentButtons { align-items: center; flex-direction: column;}


}



/* Turn off parallax scrolling for all tablets and phones.  */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}