@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-around;
    align-items: center;
    width:85%;
    margin:auto;
    margin-bottom:2vw;
}
.button1{
    background-color: #FFB347;
    padding:.5em;
    border:none;
}
.button1:hover{
    background-color: #c99;
    color:white;
}
.button2{
    background-color: #C5091D;
    font-size: 1.8vw;
    border:none;
    color:white;
    padding:1vw;
    border-radius: .5vw;
}
.button2:hover{
    background-color: #FCC3C4;
    color:black;
}
.button3{
    background-color: #1F2A44;
    font-size: 1.5vw;
    border:none;
    color:white;
    padding:1vw;
    margin-top:.7vw;
    width:18vw;
}
.button3:hover{
    background-color:#969DEA;
    color:black;
}
#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;
}

h4{
    color:#99121A;
    margin-left:7vw;
    margin-top:2.5em;
    margin-bottom:-1.5em;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 100;
    font-size:2.5vw;
}
    

.hideme{
	display:none;
}
.hotspot{
    cursor:pointer;
}
#header_container {
    width:100%;
    height:7vw;
    display:flex;
    justify-content: space-between;
    align-items: baseline;
    position:fixed;
    background-color: white;
    z-index: 1000;
    padding-left:5vw;
    padding-right:5vw;
    box-sizing: border-box;
    }
#header_menubox{
    display:flex;
    justify-content: flex-end;
    width:60%;
    font-size:1.6vw;
    font-weight: 600;
}
#logo{
    width:12vw;
    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:hover li{
    font-weight:normal;
}
.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;
}
.spacer{
    clear:both;
    height:5vw;
    /*border:thin red solid;*/
}
table{
	border-collapse: collapse;
}
.warning{
	color: red;
}

.topmenu div:hover{
    font-weight:bold; 
    
}
.topmenu{
    cursor: pointer;
    margin-right:3vw;
}
.topmenu:hover{
    background-color: #9BD5C6;
}
        
@media only screen and (max-width: 430px){
    #about{
        left:0;
    }
    #applications{
        left:0;
        align-items: center;
    }
    #banner{
        top:80px;
    }
    .button1{
        font-size:16px;
        font-weight:600;
    }
    .button3{
        font-size:18px;
        width:200px;
    }
    .centredbox-small{
        width:95%;
    font-size:20px;
    margin-top:100px;
    margin-bottom:50px;

    }
    #courses{
        left:0
    }
    #header_container{
        height:70px;
    }
    #header_menubox{
        display:none;
    }
    h4{
        margin-top:40px;
        margin-bottom:20px;
        margin-left:15px;
        font-size:120%;
    }
    #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;
    }
    .topmenu{
        display:none;
    }
}