@charset "utf-8";
/* CSS Document */
body{
	font-family: "Open Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	background-color: white;
	margin: 0;
}
#about{
    left:45%;
}
#applications{
    left:65%
}
#banner{
    width:100%;
    position:relative;
    top:7vw;
    margin-bottom: 8vw;
}
.buttonbox{
    display:flex;
    justify-content: space-between;
    align-items: center;
    width:80%;
    margin:auto;
    margin-bottom:3vw;
}
.button1{
    background-color: #FFB347;
    color:black;
	font-size:2vw;
	padding:.8vw 1.3vw .8vw 1.3vw;
    border:none;
    border-radius:5px;
}
.button1:hover{
    background-color: #c99;
    color:white;
}
.button2{
    background-color: #ff5e4d;
    border:none;
    color:white;
    padding:.5vw;
    font-size:1vw;
   
}
.button2:hover{
    background-color: #FCC3C4;
    color:black;
}
.button3{
    background-color: #586E8C;
    font-size: 1.5vw;
    border:none;
    color:white;
    padding:1vw;
    margin-top:.7vw;
    width:18vw;
}
.button3:hover{
    background-color:#9bcdd5;
    color:black;
}
.button4{
    background-color: #FFB347;
    color:black;
	font-size:1.4vw;
	padding:.6vw 1vw .6vw 1vw;
    border:none;
    border-radius:5px;
}
.button4:hover{
    background-color: #c99;
    color:white;
}

#courses{
    left:55%;
}
.centredbox-small{
    width:45vw;
    margin:auto;
    border:thin black solid;
    background-color: white;
    padding:2vw;
    font-size:1.5vw;
    margin-top:10vw;
    margin-bottom:3vw;
}
#ddmenu{
    background-color: #C5091D;
    color:white;
    position:fixed;
    width:100%;
    z-index: 2000;
    padding:40px;
    top:80px;
    display:none;
    font-size:25px;
}
.ddtitle:hover{
	font-weight:700;
}
h1{
    font-family: "Roboto", "Open Sans", Arial, sans-serif;
    font-size:2.6vw;
    color:#c5091d;
    font-weight:300;
    margin-left:7vw;
    margin-top:6vw;
    margin-bottom:0;
}
h2{
    font-family: "Roboto", "Open Sans", Arial, sans-serif;
    font-size:2.1vw;
    font-weight: 300;
    margin-bottom:1vw;
    margin-top:2.5vw;
    text-align: left;
}
h3{
    font-family: "Roboto", "Open Sans", Arial, sans-serif;
    font-size:2vw;
    font-weight: 300;
    margin-bottom:2vw;
    margin-top:2vw;
    text-align: left;
    color:#c5091d;
}
h4{
    margin-top:1.6em;
    margin-bottom:1em;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 500;
    font-size:1.6vw;
}
h5{
    font-size:1.6vw;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    display:inline;
}
h6{
    font-size:1.4vw;
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 500;
    color:#c5091d;
    display:inline
}
h7{
    display:block;
    margin-left:2vw;
    font-style: italic;
    margin-top:.5vw;
}

.hideme{
	display:none;
}
.hotspot{
    cursor:pointer;
}
#header_container {
    width:100%;
    height:8vw;
    display:flex;
    justify-content: space-between;
    align-items: center;
    position:fixed;
    background-color: white;
    z-index: 1000;
    padding-left:5vw;
    padding-right:3vw;
    box-sizing: border-box;
    }
#header_menubox{
    width:50%;
}
.header_menubox{
    display:flex;
    justify-content: flex-end;
    width:100%;
    font-size:1.4vw;
    font-weight: 600;
}
#hta{
	margin-left:-40px;
}
#logo{
    width:10vw;
    margin-right:10vw;
    margin-top:1vw;
}
#login{
    left:85vw;
}

#menuicon{
	display:none;
}

.menus  a{
    text-decoration: none;
    color:black;
    margin-left:-40px;
}
.menus li,
.menus ul{
    list-style-type:none;
    margin-left:10px;
    padding:5px;
}
/*
.menus ul > li:hover{
    font-weight: 600;
}

.menus ul > li > li:hover{
    font-weight:100;
}
*/
.menus{
    position:fixed;
    display:none;
    top:8vw;
    z-index: 2000;
    background-color: #eee;
    font-size: 1.5vw;
}
.more{
    position:relative;
    left:85%;
    top:1em;
    font-weight: 600;
    cursor:pointer;
}
#more{
    left:75vw;
}
p{
    font-size:1.4vw;
    margin-bottom:1.2vw;
}
.spacer{
    clear:both;
    height:2vw;
    /*border:thin red solid;*/
}
table{
	border-collapse: collapse;
}
.warning{
	color: red;
}

.topmenu{
    cursor: pointer;
    margin-right:1.5vw;
    padding:.3vw 1vw .4vw 1vw;
}
.topmenu:hover{
    background-color: #9BCED5;
	 font-weight:700;
}
        
	@media only screen and (max-width: 450px){
		#about{
			left:0;
		}
		#applications{
			left:0;
			align-items: center;
		}
		#banner{
			top:80px;
		}
		.button1{
			font-size:20px;
			font-weight:600;
			padding:5px 10px 7px 10px;
		}
		.button2{
			font-size:16px;
			font-weight:500;
			padding:3px 6px 3px 6px;
		}
		.button3{
			font-size:18px;
			width:200px;
		}
		.button4{
			font-size:16px;
			font-weight:600;
			padding:5px 10px 7px 10px;
		}
		.centredbox-small{
			width:95%;
		font-size:20px;
		margin-top:100px;
		margin-bottom:50px;

		}
		#courses{
			left:0
		}
		#header_container{
			height:70px;
		}
		#header_menubox{
			display:none;
		}
		h1{
			font-size:30px;
			margin-top:72px;
			margin-left:10px;
		}
		h2{
			font-size:22px;
			margin-top:30px;
		}
		h3{
			font-size:20px;
			margin-top:30px;
		}
		h4{
			font-size:18px;
		}
		h5, h6, h7{
			font-size:16px;
		}
		#login{
			left:0;
		}
		#logo{
			width:80px;
		}
		.menus a{
			color:white;
		}
		.menus{
			background-color: #4A5A7A;
			color:white;
			font-size:25px;
			width:100%;
			top:70px;
		}
		#menuicon{
			box-sizing: border-box;
			display:block;
			float:right;
			padding:2em .5em;
		}
		#more{
			left:0;
		}
		p{
			font-size:16px;
		}
		.spacer{
			height:30px;
			width:90%;
		}
		.topmenu{
			display:none;
		}
}