a {text-decoration: none; color: grey; /* word-break: break-all !important; */} label {cursor: pointer;} .align-left {text-align: left !important; width: 95%;} h1 {font-size: 60px; font-weight: 300; color: dimgrey;} h2 {font-size: 50px; font-weight: 300; color: dimgrey;} h3 {font-size: 40px; font-weight: 300; color: dimgrey;} p1 {color: dimgrey; font-size: 30px; font-weight: 300;} p2 {color: dimgrey; font-size: 20px; font-weight: 300;} p3 {color: dimgrey; font-size: 20px; font-weight: 500;} p4 {color: rgb(250, 250, 250); font-size: 13px; font-weight: 500;} p, h, h1, h2, h3, h4, p1, p2, p3, p4 {font-weight: 100 !important; font-family: 'Open Sans', Open Sans, Segoe UI, Roboto, San Francisco, SF Pro, Fira Sans, sans-serif, Helvetica, Arial !important ;} .nav-text {color: white; font-size: 19px; font-weight: 500 !important;} body {margin: 0px; width: 100%;} @media only screen and (max-height: 600px) {.article-events > .article-left > h1 {font-size: 50px;}} @media only screen and (max-height: 600px) {.article-events > .article-left > h2 {font-size: 40px;}} @media only screen and (max-height: 600px) and (orientation: landscape) {.article-events > .article-left > h3 {/* font-size: 30px; */}} @media only screen and (max-height: 600px) {.article-events > .article-left > p1 {font-size: 20px;}} @media only screen and (max-height: 600px) {.article-events > .article-left > p2, .article-events > .article-left > p1 > p2 {font-size: 15px;}} #header {z-index: 10; width: 100%; height: 70px; background-color: rgb(34, 34, 34); display: flex; flex-direction: row; gap: 7%;} #logo {background-color: rgb(34, 34, 34) ; height: 90px; padding-top: 30px; width: /* 27%; */ 100%; overflow: hidden; text-align: center;} #logo-img {user-select: none; -webkit-user-select: none; -ms-user-select: none; opacity: 1; height: 60px; border-left: 2px solid royalblue; border-right: 2px solid darkred; border-radius: 0px;} #navbar {user-select: none !important; overflow: hidden; width: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: no-wrap;} .nav {cursor: pointer; display: block; padding-left: 3.3%; padding-right: 3.3%; padding-top: 9px; height: 100%;} .nav:not(.nav-current):hover {background-color: turquoise;} .nav-current {background-color: cornflowerblue;} .nav-text {user-select: none; -webkit-user-select: none; -ms-user-select: none;} #nav-menu {display: none; padding-left: 3.3%; padding-right: 3.3%; padding-top: 9px; height: 100%;} @media (orientation: landscape) {#nav-menu:hover {background-color: rgb(54, 196, 222);}} .static-gradient {height: 1vh; width: 100%; background: linear-gradient(to right, beige, cornflowerblue, navy);} #scaled {display: none; z-index: 5; width: 100%; height: 120px; background-image: url("../Assets/scaled.jpg"); background-size: 100%;} #notifier {width: 98%; text-align: center;} #notifier-int {width: 100%; text-align: center; margin: auto;} #banner {width: 100%; height: 120px; background-attachment: fixed; background-size: 100%; background-color: rgb(34, 34, 34);} #banner-image {width: 100%;} #banner > #banner-text > h1 {color: lightgrey;} #banner-text {position: absolute; top: 245px; width: 100%; text-align: left; user-select: none; -webkit-user-select: none; -ms-user-select: none;} #pagebody {margin-top: 130px; background-color: white; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;} .content {width: 100%; display: flex; flex-direction: column; background-color: white; text-align: center; flex-wrap: nowrap;} article {width: 80%;} .content > h1 {} .content-header {} .content-body {} .article {overflow: hidden; background-color: white; display: flex; flex-direction: row; flex-wrap: no-wrap; align-items: center; justify-content: center; text-align: center;} .article-events {position: sticky; top: 10px; filter: drop-shadow(0px -50px 50px white); border-bottom: 100vh solid white;} .article-left {width: 50%; flex-grow: 0; padding-left: 1%; padding-right: 1%;} .article-right {width: 50%; flex-grow: 0; padding-left: 1%; padding-right: 1%;} .landscape {width: 90%; filter: drop-shadow(0px 0px 5px lightgrey); max-height: 50vh !important;} .portrait {width: 80%; filter: drop-shadow(0px 0px 5px lightgrey); max-width: 33vw !important; max-height: 90vh !important;} /* .landscape::after {content: "
Hello?";} */ .article-image-small {width: 50%; filter: drop-shadow(0px 0px 5px lightgrey)} .article-image-large {width: 90%; filter: drop-shadow(0px 0px 5px lightgrey)} @media (orientation: portrait) {.article-image-small {width: 90% !important;}} @media (orientation: portrait) {.article-image-large {width: 100% !important;}} #pagebody > a {text-decoration: none; color: dimgrey;} .enlarge {display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; justify-content: center; align-items: center; text-align: center;} .enlarge-int {background-color: rgba(0, 0, 0, 0.8); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column;} .enlarge-text {content: "Cabin Crew Competencies Poster"; max-width: 50%; background-color: black;} .enlarge-content {content: url('CCC_Event_Cube_Poster_Final.jpg'); max-height: 80vh; max-width: 80vw; filter: drop-shadow(0px 0px 10px black);} #para1 {} #para2 {display: none;} #footer {width: 100%; background-color: rgb(34, 34, 34);; display: flex; flex-direction: row; gap: 2%; justify-content: center; align-items: center;} #lower-nav {width: 100%; display: flex; flex-direction: row; gap: 3%; flex-wrap: no-wrap; justify-content: center; align-items: center; text-align: center;} .buttons {display: none !important;} #enlargebutton:checked ~ .enlarge {display: flex;} .next {transition: 1s; position: absolute; top: 35vh; right: 12vw; padding-left: 0.5vw; display: flex; align-items: center; justify-content: center; text-align: center; width: 7vw; height: 17vw; background-color: rgba(0, 0, 0, 0.3); border: 1px solid grey; border-radius: 2vw;} .next:hover {outline: 2px solid cornflowerblue;} .previous:hover {outline: 2px solid cornflowerblue;} .next-int {border-radius: 0.4vw; filter: drop-shadow(1px 0px 1px black); border-left: 2vw solid #A0A0A0; border-top: 2vw solid transparent; border-bottom: 2vw solid transparent;} .previous {pointer-events: none; transition: 1s; opacity: 0.3; position: absolute; top: 35vh; left: 12vw; padding-left: 0.5vw; display: flex; align-items: center; justify-content: center; text-align: center; width: 7vw; height: 17vw; background-color: rgba(0, 0, 0, 0.3); border: 1px solid grey; border-radius: 2vw;} .previous-int {border-radius: 0.4vw; filter: drop-shadow(1px 0px 1px black); border-right: 2vw solid #A0A0A0; border-top: 2vw solid transparent; border-bottom: 2vw solid transparent;} #nextbutton:checked ~ .enlarge > .enlarge-int > label > img {content: url("../Assets/24nov24_Cropped_2_Poster_CCC_Flyer_Web_Edition_Double_Border-715x1024.png");} #nextbutton:checked ~ .enlarge > .enlarge-int > .enlarge-text > #para1 {display: none;} #nextbutton:checked ~ .enlarge > .enlarge-int > .enlarge-text > #para2 {display: inline;} #nextbutton:checked ~ .enlarge > .enlarge-int > label > .next {opacity: 0.3; transition: 1s; pointer-events: none;} #nextbutton:checked ~ .enlarge > .enlarge-int > label > .previous {opacity: 1; transition: 1s; pointer-events: auto;} #header-email {width: 98%; position: absolute; top: 95px; left: 0px; text-align: center;} #header-desc {width: 98%; position: absolute; top: 95px; left: 5px; text-align: left;} @media (orientation: portrait) {#navbar {flex-direction: column !important;}} @media (orientation: portrait) {.nav {display: none !important;}} @media (orientation: portrait) {#nav-menu {display: block !important; width: 100% !important; text-align: center !important;}} @media (orientation: portrait) {.article {flex-direction: column !important;}} @media (orientation: portrait) {.article-left {width: 80% !important;}} @media (orientation: portrait) {.article-right {width: 80% !important;}} @media (orientation: portrait) {.landscape {max-width: 80% !important; margin-top: 30px !important;}} @media (orientation: portrait) {.portrait {max-width: 90% !important; max-height: 60vh !important; margin-top: 30px !important;}} @media (orientation: portrait) {.nav-text {font-size: 34px !important; font-weight: 700 !important;}} @media (orientation: portrait) {#header {height: 100px;}} @media (orientation: portrait) {#banner {background-attachment: fixed !important; background-position: 0px 60px;}} @media (orientation: portrait) {#banner-text > h1 {font-weight: 500 !important; font-size: 90px !important;}} @media (orientation: portrait) {#logo-img {border: 0px solid white; width: 670px; height: 120px; position: relative; top: -30px; left: 10px; margin-bottom: 20px;}} @media (orientation: portrait) {#header {border-width: 5px 0px 5px 0px !important;}} @media (orientation: portrait) {#header-desc > p4 {font-size: 20px; opacity:0;}} @media (orientation: portrait) {#header-email > p4 {font-size: 20px; opacity: 0;}} @media (orientation: portrait) {#banner {height: 170px;}} @media (orientation: portrait) {#banner-text {text-align: center !important; position: absolute; top: 295px; !important;}} @media (orientation: portrait) {#gdpr {display: none !important;}} @media only screen and (max-width: 780px) {#navbar {flex-direction: column !important;}} @media only screen and (max-width: 780px) {.nav {display: none !important;}} @media only screen and (max-width: 780px) {#nav-menu {display: block !important; width: 100% !important; text-align: center !important;}} @media only screen and (min-width: 780px) {.nav {width: auto !important; word-wrap: nowrap;}} #menubutton:checked ~ #header {height: auto; position: absolute; top: 117px;} #menubutton:checked ~ #header > #navbar > .nav {display: block !important; width: 100% !important; text-align: center; !important;} #menubutton:checked ~ #header > #navbar > #nav-menu {} #menubutton:checked ~ #banner-text, #menubutton:checked ~ #banner {opacity: 0; !important;} @media only screen and (min-width: 781px) and (orientation: landscape) {#header {height: 70px !important;}} @media only screen and (max-width: 1168px) {#banner {background-position: 0px 30px;}} @media only screen and (max-width: 1014px) {#banner {background-position: 0px 60px;}} @media only screen and (max-width: 850px) {#banner {background-position: 0px 90px;}} @media only screen and (max-width: 800px) {#banner {background-position: 0px 0px; background-size: 180%; background-repeat: no-repeat;}} .dialogue-box {z-index: 400 !important; display: none; justify-content: center; align-items: center; text-align: center; width: 100%; height: 100vh; position: fixed; top: 0px; left: 0px; background-color: rgba(0, 0, 0, 0.3);} .dialogue-box-int {user-select: none; -webkit-user-select: none; -ms-user-select: none; padding-left: 20px; padding-right: 20px; text-align: center; width: 80%; background-color: rgba(50, 150, 200, 0.97); border: 2px solid; border-color: lightgrey lightgrey grey grey;} #dialogue1-button:checked ~ #dialogue-tickets {display: flex;} #dialogue1-button:checked ~ *:not(#dialogue-tickets) {pointer-events: none;} @media (orientation: portrait) {.dialogue-header-text {font-size: 80px !important;}} @media (orientation: portrait) {.dialogue-footer-text {font-size: 60px !important;}} @media (orientation: portrait) {.dialogue-button-text {font-size: 60px !important;}} @media (orientation: portrait) {.dialogue-box-int {padding-top: 50px; padding-bottom: 50px;}} #dialogue2-button:checked ~ #dialogue-conferences {display: flex !important;} #dialogue2-button:checked ~ *:not(#dialogue-conferences) {pointer-events: none;} .nav {width: 100% !important; text-align: center; !important;} @media (orientation: portrait) {#contact-admin {display: none !important;}} #terms > h2 {margin-bottom: 10px !important;} /* PS yes I did make this website, Sian. I left Ted Penfold's (Grumpy Ted's) name as the author on the loading/redirect page, originally made for the old site, since he passed away last year and I couldn't bring myself to erase his name. Here's a website he made as a demo shortly before he died > gtwd.co.uk (It's good - he was good) */ /* @media (max-aspect-ratio: 5:3) and (orientation: portrait) {.article {flex-direction: row}} */ .centered-content {display: flex; align-items: center; justify-content: center; text-align: center;} /* @media (orientation: landscape) {#iframexp {height: 1300px !important;}} */ @media only screen and (min-width: 2000px) {h1 {font-size: 80px !important;}} @media only screen and (min-width: 2000px) {h2 {font-size: 70px !important;}} @media only screen and (min-width: 2000px) {h3 {font-size: 60px !important;}} @media only screen and (min-width: 2000px) {p1 {font-size: 50px !important;}} @media only screen and (min-width: 2000px) {p2 {font-size: 40px !important;}} @media only screen and (min-width: 2000px) {p3 {font-size: 30px !important;}} @media only screen and (min-width: 2000px) {p4 {font-size: 20px !important;}} @media only screen and (min-width: 2000px) {#header-desc, #header-email {top: 90px !important;}} @media only screen and (min-width: 2000px) {#banner-text {top: 220px !important}} @media only screen and (min-width: 2000px) {input[type="text"], input[type="submit"] {font-size: 40px !important;}} @media only screen and (min-width: 2700px) {h1 {font-size: 100px !important;}} @media only screen and (min-width: 2700px) {h2 {font-size: 90px !important;}} @media only screen and (min-width: 2700px) {h3 {font-size: 80px !important;}} @media only screen and (min-width: 2700px) {p1 {font-size: 70px !important;}} @media only screen and (min-width: 2700px) {p2 {font-size: 60px !important;}} @media only screen and (min-width: 2700px) {#header-desc, #header-email {top: 60px !important;}} @media only screen and (min-width: 2700px) {#banner-text {top: 200px !important}} @media only screen and (min-width: 2700px) {p3 {font-size: 50px !important;}} @media only screen and (min-width: 2700px) {p4 {font-size: 40px !important;}} @media only screen and (min-width: 2700px) {input[type="text"], input[type="submit"] {font-size: 60px !important;}} @media (orientation: portrait) {#iframexp {width: 80% !important;}} /* #logo-img {border-left: 0px solid red; border-left: 3px solid #5FA0E9; border-right: 3px solid #55B5E1; border-radius: 5px;} */ #header {border-top: 3px solid cornflowerblue; border-bottom: 3px solid #4FC0DC;} .nav:not(.nav-current):hover {background-color: cornflowerblue !important;} .nav-current {background-color: #4FC0DC} #logo {height: 87px;} /* #menubutton:active ~ #header > #navbar > #nav-menu {background-color: #4FC0DC !important;} */ #menubutton:checked ~ #header > #navbar > #nav-menu {border-bottom: /* 7px */ 3px solid #4FC0DC;} @media (orientation: portrait) {#logo-img {border-width: 0px 7px 0px 7px !important;}} /* was 5px border widths, one below is new line of code */ @media (orientation: portrait) {#header {border-width: 7px 0px 7px 0px !important;}} @media (orientation: portrait) {.dialogue-box-int {width: 90% !important; border-width: 4px;}} .dialogue-box-int {max-height: 100vh !important;} @media only screen and (max-device-height: 200px) {.dialogue-box-int > h2 {font-size: 40px !important}} @media only screen and (max-device-height: 200px) {.dialogue-box-int > p1 {font-size: 22px !important}} #menubutton:active ~ #header > #navbar > #nav-menu {background-color: rgb(54, 196, 222) !important;} .show-hide + label > :last-child {display: none;} .show-hide + label + div {display: none;} .show-hide:checked + label + div {display: block;} .show-hide:checked + label > p2 {display: none;} .show-hide:checked + label > :last-child {display: inline !important;} #events-notification-link:hover > p3 {text-decoration: underline;} #events-notification-link {background-color: rgba(79, 192, 220, 0.6) ; width: 60%; margin-left: 20%; position: absolute; top: 220px; text-align: center;} #events-notification-link > p3 {color: white !important; filter: drop-shadow(1px 1px 1px black);} @media only screen and (max-width: 780px) {#events-notification-link {top: 320 !important; padding: 1%; width: 98% !important; margin-left: 0% !important; background-image: url(../Assets/plane1-e1599146540398hc.jpg); background-size: 100%;}} @media (orientation: portrait) {#events-notification-link {top: 400 !important; width: 98% !important; margin-left: 0% !important; padding: 1%; background-image: url(../Assets/plane1-e1599146540398hc.jpg); background-size: 100%;}} @media (orientation: portrait) {#events-notification-link > p3 {font-size: 35px !important; filter: drop-shadow(1px 1px 2px black) !important;}} #eventsbody > #events-notification-link, #termsbody > #events-notification-link {background-color: rgba(0, 0, 0, 0) !important;} #eventsbody > #events-notification-link > p3, #termsbody > #events-notification-link > p3 {filter: drop-shadow(1px 1px 2px black);} @media (orientation: portrait) {#menubutton:checked ~ #header > #navbar > #nav-menu {border-bottom: /* 7px */ 3px solid #4FC0DC !important;}} @media only screen and (min-width: 2000px) and (orientation: landscape) {#art-div {position: sticky; top: -100vh;}} @media only screen and (min-width: 2000px) and (orientation: landscape) {#header {height: 120px !important;}} @media only screen and (min-width: 2000px) and (orientation: landscape) {#banner-text {position: absolute; top: 360px !important;} #logo-img {width: 600px !important; height: 105px !important; border-width: 0px 8px 0px 8px !important;} #logo {height: 150px !important;} #banner {height: 150px !important;} .nav-text {font-size: 35px !important;} #header-email, #header-desc {top: 120px !important;} #header-email > p4, #header-desc > p4 {font-size: 27px !important;}} @media only screen and (min-width: 2700px) and (orientation: landscape) {#banner-text {position: absolute; top: 340px !important;}} #logo-img {border-color: #5FA0E9 !important; border-radius: 5px;} /* July 2025 Revisions */ @media (orientation: landscape) {#header {border-bottom: 3px solid #4FC0DC !important; border-top: 3px solid cornflowerblue !important}} /* August 2025 Revisions */ #header {border-image: linear-gradient(40deg, darkred, cornflowerblue, cornflowerblue) 100 !important; z-index: 300 !important;} .nav-current {background-color: rgb(34,34,34) !important;} .nav-current:hover {background-color: cornflowerblue !important;} #background-mp4 {display: none !important;} .portrait {width: initial !important;} .nav:hover {background-image: linear-gradient(40deg, darkred, cornflowerblue, cornflowerblue) !important; background-attachment: fixed;} @keyframes fadein {from {filter: brightness(0);} to {filter: brightness(1);}} #banner {animation-name: fadein; animation-duration: 3s;} #logo-img {border-width: 0px !important;} /* November 25 Revisions */ @media (min-width: 2700px) {#logo-subtext {font-size: 27px !important;}} #header-desc > p4, #header-email > p4 {font-style: italic !important;} @media (orientation: landscape) and (max-width: 780px) {#header-desc, #header-email {position: absolute; top: 0px;}} @media (orientation: landscape) and (min-width: 780px) {#header {/* border: 0px !important; border-bottom: 0px !important; */ border-top: 0px !important;}} #banner {display: none !important;} #banner-text {display: none !important;} @media (orientation: portrait) {h3 {font-size: 60px !important;}} @media (orientation: portrait) {p3 {font-size: 40px !important;}} @media (orientation: portrait) {.article-left > p1 {font-size: 45px !important;}} @media (orientation: portrait) {.article-left > p2, .article-left > p1 > p2 {font-size: 35px !important;}} .landscape, .portrait {border: 1px solid dimgrey;} #header-email > p4, #header-desc > p4 {font-weight: 500 !important;} .article-events {filter: drop-shadow(0px 0px 0px white); padding-top: 3vh;} .article-events {margin-left: 10vw; margin-right: 10vw;} .dialogue-box-int {background-color: rgba(34,34,34,0.9) !important;} .dialogue-box {background-color: transparent !important;} @media (orientation: landscape) {#iframexp {transform: scale(0.80);}} @media (orientation: portrait) {#AAIB2 {font-size: 30px; color: white !important;}} /* @media (orientation: landscape) and (min-width: 780px) {#logo {background-color: white !important;} #logo-img {filter: invert(100%);} #header-desc >p4, #header-email >p4 {color: dimgrey !important;}} */ @media (orientation: landscape) and (min-width: 2000px) and (max-width: 2999px) {#iframexp {width: 50% !important;}} @media (orientation: landscape) and (min-width: 2500px) {#iframexp {width: 35% !important; transform: scale(1.2) !important;}} @media (min-width: 2500px) {#iframexp {position: relative; top: 150px}} #menubutton:checked ~ #header > #navbar > #nav-menu {border-top-width: 3px !important; border-image: linear-gradient(40deg, darkred, cornflowerblue, cornflowerblue) 100 !important;} #menubutton:checked ~ #header {border-top-width: 3px !important; border-image: linear-gradient(90deg, darkred, cornflowerblue, cornflowerblue) 100 !important;} @media (orientation: portrait) {#menubutton:checked ~ #header > #navbar > #nav-menu {border-bottom: 7px solid #4FC0DC !important; border-top: 7px solid cornflowerblue !important; border-image: linear-gradient(40deg, darkred, cornflowerblue, cornflowerblue) 100 !important;} #menubutton:checked ~ #header {border-top: 0px solid cornflowerblue !important; border-image: linear-gradient(40deg, darkred, cornflowerblue, cornflowerblue) 100 !important;}} #about-collage {display: flex; flex-direction: row; flex-wrap: no-wrap; justify-content: center; align-items: center; gap: 5vw;} #AAIB {max-width: 30% !important; filter: drop-shadow(0px 0px 0px white) !important;} #about-text-new {text-align: left;} #about-appearing {display: none;} #about-original {display: none;} @media (min-width: 1700px) and (max-width: 1999px) {#AAIB {width: 50% !important;}} @media (min-width: 1500px) {#AAIB {max-width: 25% !important;}} @media (max-width: 1100px) {#AAIB {max-width: 35% !important;}} @media (max-width: 1000px) {#AAIB {max-width: 45% !important;}} @media (max-width: 900px) {.disap {display: none;} #about-text-new {display: none;} #about-original {display: initial;} #AAIB {max-width: 70% !important;}} @media (orientation: portrait) {.disap {display: none;} #about-text-new {display: none;} #about-original {display: initial; color: white !important;} #AAIB {max-width: 70% !important; border: 0px solid black; filter: drop-shadow(0px 0px 0px black);}} .article-events {border-top: 1px solid rgb(235,235,235);} @media (min-width: 2000px) {#loading > img {height: 30px;}} #logo-subtext, #header-email > p4, #header-desc > p4 {font-weight: 500 !important;} #gdpr {font-weight: 500 !important;} .article-events {min-height: 95vh; padding-top: 0vh;} @media (orientation: portrait) {#about-collage {border-top: 0px solid white;} #about-collage > img {position: relative; top: 20px;} #paddington {width: 80% !important; margin-left: 10% !important; margin-right: 10% !important;}} @media (orientation: portrait) {.article-events {border-bottom: 70vh solid white;}} @media (orientation: landscape) and (max-width: 800px) {#iframexp {width: 80% !important;}}