@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Raleway&display=swap');

HTML {scroll-behavior:auto;}

BODY {background: rgba(76,87,104,1.0); margin: 0; font-family: 'Raleway', sans-serif; font-size: 1.0em; line-height: 1.6em;}
HEADER {text-align: center; width:64%; margin: 1% auto; background: url("../images/logo-75.png"); background-repeat: no-repeat; background-size: contain;}
HEADER IMG{width: 88%; cursor: pointer;}

H1 {font-size: 1.6rem;}
H2 {font-size: 1.3rem;}
H3 {font-size: 1.1rem;}
H4 {font-size: 1.0rem;}

FOOTER {background:rgba(53,63,73,1.00); color: #FFFFFF; text-align: center; padding: 1% 0; border-top: 2px solid rgba(255,255,255,0.30);}
FOOTER A {margin: 0 6px; border: 0;}


A {font-weight: 700; color: #000; text-decoration: none; border-bottom: thin #000 dotted;}
A:visited {color: #444;}
A:hover {border-bottom: thin #000 solid;}

SELECT, INPUT:not(.checkbox), TEXTAREA {padding: 8px; border: 0; border-radius: 4px; min-width: 40%; max-width: 340px; font-family: 'Raleway', sans-serif;}
TEXTAREA {height: 120px;}

INPUT[type=submit] {color: #000; text-align: center; font-weight: 600; font-size: 1.0rem; cursor: pointer; padding: 8px; border: 0; border-radius: 4px;}

#MyKey INPUT:not(.button):not([type="email"]), #MyKey SELECT {padding: 8px; border: 0; border-radius: 4px; width: auto; max-width: 80px; min-width: 40px; font-family: 'Raleway', sans-serif;}

#Available {padding: 12px;}
#Available .Y {border-bottom: 3px solid #0C0; padding: 4px 0; margin-right: 8px; width: auto; min-width: 60px; display: inline-block; text-align: center;}
#Available .W {border-bottom: 3px solid #FFA600; padding: 4px 0; margin-right: 8px; width: auto; min-width: 60px; display: inline-block; text-align: center;}
#Available .N {border-bottom: 3px solid #C00; padding: 4px 0; margin-right: 8px; width: auto; min-width: 60px; display: inline-block; text-align: center;}

#ButtonArray {width: 64%; margin: 0 auto; text-align: center;}

#BiogFrame {width: 100%; height: 0; transition: height 0.8s;}

.BlueDiv {background: rgba(76,87,104,1.0); color: #FFF; padding: 6px;}

.BlueText {color: rgba(76,87,104,1.0);}

.BlueBox {border: 1px solid rgba(76,87,104,0.66);}

.BlueFill {background: rgba(228,228,238,1.00); padding: 12px 48px 0;}

.Courses {background: rgba(77,87,94,1.00); padding: 6px 6px 6px 18px; border-radius: 3px; color: rgba(255,255,255,1.00); margin-bottom: 1%; min-height: 133px;}

.checkbox {width: 1.8rem; height: 1.2rem; background: #4C82B4;}

.LatestCourse {background:rgba(147,140,105,1.00); padding: 6px 6px 6px 18px; border-radius: 3px; color: rgba(255,255,255,1.00); margin-bottom: 1%; min-height: 133px;}

.Courses IMG,
.LatestCourse IMG {float: right; max-width: 28%;}

.LatestCourse A, .Courses A {color: #FFF; border-color: #FFF;}

.ListItem1 {width: 200px; display: table-cell;}
.ListItem2 {display: table-cell;}

#InBrief {width: 35%; padding: 6px; font-size: 0.8rem; display: table-cell;}

#overlay {position: absolute; margin: 24px; z-index: 5;}

#jssor_1 {position:relative; margin:0 auto; left:0px; width:1920px; height:420px; overflow:hidden; visibility:hidden;}

#video {background: rgba(0,0,0,0.3); width: 100%; text-align: center;}

.body {width: 60%; margin: 0.5% auto;  padding: 1% 2%; background: rgba(255,255,255,1.00);}

.subhead {margin-bottom: 8px; font-weight: bold;}

.medtext {font-size: 0.9rem;}
.smalltext {font-size: 0.8rem;}

.button {background: rgba(100,178,0,0.80); color: #000; width:40%; max-width: 340px; padding: 6px; text-align: center; font-weight: 600; cursor: pointer; border-radius: 3px; display: inline-block; margin: 0 12px 12px;}

.greenbutton {background: rgba(0,166,32,1.00); color: #000; width:40%; max-width: 340px; padding: 6px; text-align: center; font-weight: 600; cursor: pointer; border-radius: 3px; display: block; margin: 0 12px 12px;}

.greybutton {background: rgba(202,202,202,1.00); color: #666; width:40%; max-width: 340px; padding: 6px; text-align: center; font-weight: 600; cursor: pointer; border-radius: 3px; display: block; margin: 0 12px 12px;}

.iButton {background: rgba(255,166,0,1.00); color: #000; width:40%; max-width: 340px; padding: 6px; text-align: center; font-weight: 600; cursor: pointer; border-radius: 3px; display: inline-block; margin: 0 12px 12px;}

.iPalebutton {background: rgba(76,130,180,0.6); color: #000; width:40%; max-width: 340px; padding: 6px; text-align: center; font-weight: 600; cursor: pointer; border-radius: 3px; display: inline-block; margin: 0 12px 12px;}

.iGreybutton {background: rgba(202,202,202,1.00); color: #666; width:40%; max-width: 340px; padding: 6px; text-align: center; font-weight: 600; cursor: pointer; border-radius: 3px; display: inline-block; margin: 0 12px 12px;}

.miniButton {background: rgba(255,166,0,1.00); color: #000; width:20%; width: auto; min-width: 170px; padding: 3px 9px; text-align: center; font-weight: 600; font-size: 0.8rem; cursor: pointer; border-radius: 4px; display: inline-block; margin: 0 4px 4px;}

.miniGreybutton {background: rgba(202,202,202,1.00); color: #000; width:20%; width: auto; min-width: 170px; padding: 3px 9px; text-align: center; font-weight: 600; font-size: 0.8rem; cursor: pointer; border-radius: 4px; display: inline-block; margin: 0 4px 4px;}

.buttonBorder {width: auto; border: 1px solid #999;}

.ellipsis {overflow-y: hidden; height: 240px; border-bottom: thin solid rgba(0,0,0,0.3); padding: 12px 0; transition: width 0s, height 0.8s;}
.ellipsis IMG {float: right;}

.expand {height: 2vw; width: 2vw; border-radius: 1vw; cursor: pointer; background: rgba(76,87,104,0.4); z-index: 15; position: absolute; margin: 230px 32% 0;}
.expand IMG {width: 5%; opacity: 50%; margin: 40px auto; display: block; float: none;}

.hr {
background: linear-gradient(90deg, rgba(201,207,219,1) 0%, rgba(76,87,104,0.6) 12%, rgba(76,87,104,1) 50%, rgba(76,87,104,0.6) 88%, rgba(201,207,219,1) 100%); height: 1px; width: 100%; margin-top: 12px;}

.YouTube {width: 60%; height: 420px; border: 1px solid #938c69; margin: auto;}

#VoucherImg {right: 20%; width: 18%; position: absolute; z-index: 20;}

.GreenFill {background: rgba(68,153,0,1.00); padding: 6px; color: #FFF;}
.RedFill {background: rgba(176,0,0,1.00); padding: 6px; color: #FFF;}

.insetImg {width: auto; max-width: 40%; float: left; margin-right: 2%;}

.Daypart {width: 100px; display: inline-block;}

.AidIcon {cursor: pointer; height: 21px; margin: 0 8px;}

/* Desktops and laptops. iPad portrait ----------- */
@media only screen 
and (min-width: 1025px)
and (max-width : 1279px) {
	

}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px)
and (max-device-width: 1024px) {

.body {width: 90%;}

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (max-device-width : 767px) {
BODY {font-size: 0.8rem; line-height: 1.6em;}
HEADER {text-align: center; width:85%; margin: 1% auto; background: url("../images/logo-50.png"); background-repeat: no-repeat; background-size: contain;}

FOOTER {font-size: 0.7rem; line-height: 1.2rem;}

H1 {font-size: 1.0rem;}
H2 {font-size: 0.9rem;}
H3 {font-size: 0.8rem;}
H4 {font-size: 0.7rem;}

SELECT, INPUT:not(.checkbox), TEXTAREA {padding: 3px; border-radius: 2px; width: 90%;}
TEXTAREA {height: 80px;}

INPUT[type=submit] {width: 90%; font-size: 0.8rem; padding: 4px; border: 0; border-radius: 3px;}

#MyKey INPUT:not(.button):not([type="email"]), #MyKey SELECT {padding: 4px; border-radius: 2px; max-width: 40px; min-width: 20px; font-family: 0.7rem;}

#Available .Y,
#Available .W,
#Available .N {padding: 2px 0; margin-right: 4px; width: auto; font-size: 0.7rem;}

#ButtonArray {width: 90%;}

.BlueDiv {padding: 1px;}

.BlueFill {padding: 6px 12px 0;}
.BlueFill P:first-of-type :not(#Available ) {max-width: 66%;}

.Courses,
.LatestCourse {padding: 4px 4px 4px 8px;}

.Courses IMG,
.LatestCourse IMG {float: right; max-width: 50%;}

.ListItem1 {width: 112px;}

.body {width: 96%; margin: 0.5% auto;  padding: 1% 2%; background: rgba(255,255,255,1.00);}

.medtext {font-size: 0.7rem;}
.smalltext {font-size: 0.6rem;}

.button,
.greybutton,
.iButton,
.iPalebutton,
.iGreybutton {width:80%; max-width: 400px; padding: 4px; margin: 0 6px 6px;}

.miniButton, 
.miniGreybutton {font-size: 0.6rem; width:40%; padding: 2px; margin: 0 3px 3px;}

.YouTube {width: 90%; height: 180px;}

#VoucherImg {right: 5%; width: 30%;}

.insetImg {width: 96%; max-width: 96%; float: none; margin: 0 1%;}
}