@font-face {
    font-family: OpenDyslexic; 
    src: url('fonts/OPENDYSLEXIC-REGULAR.TTF'); 
}

@font-face { 
    font-family: OpenDyslexic; 
    font-weight: bold; 
    src: url('fonts/OPENDYSLEXIC-BOLD.TTF');
    
}

a {
    text-decoration: none;
}

* {
    box-sizing: border-box;
}

html, body {
    scroll-behavior: smooth; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%;
    background-color:#ffffe9; 
    color:#00007D; 
}

body {font-family: "Lato", sans-serif}

html, body { overflow-x: hidden; }
 
body { position: relative; }

img { 
    border-radius : 15px;
    position: relative;
}

button[title]:hover::after {
    content: attr(title);
    font-size: 24px;
    color: white;
    background-color: red;
    padding: 5px;
    //border-radius: 5px;
	text-wrap: nowrap;		 
	position: absolute;
	top : -140%;
    left : 60%;
	//z-index: 0;
	opacity : 1.0;
}

.columns {
    display: flex;
    float:left;
}

.people{
    position:absolute;
    z-index:998;
    width:70%;
}

.price {
    font-family:OpenDyslexic;
    list-style-type: none;
    border: 1px solid #00a4b4;
    border-radius: 30px;
    margin: 0;
    padding: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}

.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}

.price .header {
    font-family:OpenDyslexic;
    background-color: #fffcea;
    color: #00a4b4;
    font-size: 25px;
}

.price li {
	font-family:OpenDyslexic;
    border-bottom: 1px solid #00a4b4;
    padding: 2vh;
    text-align: center;
}

.price .grey {
    background-color: #afe9f4;
    font-size: 20px;
}

.button {
    background-color: #00a4b4;
    border: none;
    border-radius:50px;
    color: white;
    padding: 1vh 2vw;
    text-align: center;
    text-decoration: none;
    font-size: 2vh;
}


.first {
    width: 100%;
    height: 1000px;
}

#colourbanner {
    left:0;
    top:2.5%; 
    border-radius:0px; 
    height:10%; 
    position:fixed; 
    width:100vw;
    z-index:-1;
}

#logo1 {
    left:0;
	top:2%; 
	margin-left: 45vw;
	border-radius:0px; 
	height:4.5vh; 
	position:fixed;
	width:10vw; 
	z-index:9;
}

#logo2 {	
    width:20vw; 
	position: absolute; 
	top: 30vh; 
	left: 40vw;
	z-index:999;
}

.explore:hover { cursor: pointer;}

.explore {
	font-family:OpenDyslexic; 
	padding:5px; 
	position: absolute; 
	top: 70vh; 
	left: 42vw; 
	background-color:#F5bf9f; 
	color: #00A4B4;
	font-size:2vw;  
	height:10%; 
	width:15%; 
	border: none; 
	border-radius:50px;
}

.heading{
    margin-bottom:0; 
	padding-bottom: 0; 
	padding-top: 0; 
	width: 100%; 
	position: absolute; 
	top: 45vh; 
	font-size: 3vw; 
	font-weight:bold; 
	font-family: OpenDyslexic; 
	color: #00A4B4;
}

.txt {	
    margin-left:25vw; 
	margin-right: 25vw;
	text-align: left; 
	padding-bottom: 0; 
	font-size: 3.5vh; 
	font-weight:bold;
	font-family: OpenDyslexic; 
	color: #00A4B4; 
	position: absolute;
}

.second {
    width: 100%;
    height: 1000px;
}

.hero {background-size:100vw 90vh;}
	  
.footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    z-index: 10;
}

.menu {font-size: 2.7vh;}

.fmenu {font-size: 1.8vh;}

.cookieBanner {
	position: fixed;
	display : block;
	bottom :10%;
	height:40%;
	width: 100%;
	background-color: #00a4b4;
	color: #fffcea;
	font-size: 4vh ;
}

.hidden { display : none;}

.cookieBanner {
		position: fixed;
		display : block;
		bottom :10%;
		height:40%;
		width: 100%;
		background-color: #00a4b4;
		color: #fffcea;
		font-size: 4vh ;
}

#ppl1 {
    left:30%; 
    bottom:10%; 
    z-index:2;
}

#ppl2 {
    width:50%; 
    left:50%; 
    bottom:0%; 
    z-index:4;
}

#ppl3 {
    left:-20%; 
    bottom:0%; 
    z-index:6;
}

#ppl4 {
    width:30%; 
    left:0%; 
    bottom:0%; 
    z-index:8;
}

#ppl5 {
    left:45%; 
    bottom:0%; 
    z-index:10;
}

#button-2 {
    background-color:#00A4B4; 
    color: #FFFCEA;
    z-index:999;
}

#A4 {
    position:absolute; 
    height:100%; 
    width:100%; 
    top:471%;
    background-color:#00A4B4;  
    padding-top: 64px; 
    z-index:10;
}

.hidden {display : none;}

.rotopopo {display: none;}

#subsquare {
    border-style: solid; 
    border-width: 0.7vh 0px 0px 0px; 
    border-color: #fffcea;
    border-radius:30px 0px 0px 0px;
    font-size: 2.5vh;
}

#toptable {
    padding-top:10vw;  
    padding-left:10vw;
}

#toptop {
    width:45vw;   
}

#bottom-table {
    width:45vw; 
    border-radius: 30px 30px 30px 30px; 
    background-color:red;
}

#webtable {
    padding-top:10vw; 
    padding-left:0px;
    display:inline-block;
}

#course-list {
    background-color:#00A4B4; 
    color: #FFFCEA;
    border-style: solid; 
    border-width: 0.7vh 0.7vh 1px 0.7vh; 
    border-color: #fffcea;
    border-radius:0px 30px 0px 0px;
    font-size: 2.5vh;
}

.table-lines {
    border-style: solid;
    border-width: 0px 0.7vh;
    border-color: #fffcea;
    font-size: 1.56vh;
}

.bottom-line {
    border-style: solid;
    border-width: 0px 0.7vh 0.7vh 0.7vh;
    border-color: #fffcea; 
    border-radius: 0px 0px 30px 0px;
}


@media (min-width: 2300px) {
    
    .people{
        position:absolute;
        z-index:998;
        height:60vh;
        left:35%;
    }
    
    #ppl1 {
        left:50%;
        width:auto;
        height:60vh;
        bottom:9%; 
        z-index:2;
    }
    
    #ppl2 {
        width:auto;
        height:60vh;
        left:75%; 
        bottom:0%; 
        z-index:4;
    }
    
    #ppl3 {
        width:auto;
        height:65vh;
        left:0%; 
        bottom:0%; 
        z-index:6;
    }
    
    #ppl4 {
        width:auto;
        height:70vh;
        left:0%; 
        bottom:0%; 
        z-index:8;
    }
    
    #ppl5 {
        width:auto;
        height:80vh;
        left:50%; 
        bottom:0%; 
        z-index:10;
    }
        
    .hero {
        background-size:100% 100%;
        overflow-x: hidden;
    }
    
    #logo2 {	
		margin-left: 0%;
		width:16%; 
		position: absolute; 
		top: 25vh; 
		left: 43%;
    }
    
    .heading{
    	top: 46vh; 
    	font-size: 2vw; 
    }
    
}

@media (max-width: 600px) and (orientation: portrait) {
    
    html, body {
        width: 100vw;
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    
    #colourbanner {
        left:0;
        top:2.5%; 
        border-radius:0px; 
        height:3%; 
        position:fixed; 
        width:100vw; 
        z-index:-1;
    }
    
    .hero {
        background-size:200% 75%;
        overflow-x: hidden;
    }
    
    #logo2 {	
		margin-left: 0%;
		width:50%; 
		position: absolute; 
		top: 35vh; 
		left: 25%;
    }
    
    .heading{
    	top: 46vh; 
    	font-size: 5.5vw; 
    }
    
    .explore {
    	top: 70vh; 
    	left: 35%; 
    	font-size:6vw;  
    	height:10%; 
    	width:30%; 
    }
    
    .people{
        position:absolute;
        z-index:998;
        width:auto;
        height:40vh;
        left:35%;
        overflow-x: hidden;
        display:none;
    }
    
    #ppl1 {
        left:0%; 
        bottom:10%; 
        z-index:2;
        overflow-x: hidden;
    }
    
    .txt {	
        margin-left:10vw; 
    	margin-right: 10vw;
    	top: 30px;
    	text-align: left; 
    	padding-bottom: 0; 
    	font-size: 5vw; 
    	font-weight:bold;
    	font-family: OpenDyslexic; 
    	color: #00A4B4; 
    	position: absolute;
    }
    
    #button-2 {
        top: 45vh; 
        background-color:#00A4B4; 
        color: #FFFCEA;
        z-index:999;
    }
    
    #ppl2 {
        width:50%; 
        left:50%; 
        bottom:0%; 
        z-index:4;
    }
    
    .columns {
        display: block;
        margin-left:auto;
        margin-right:auto;
        width:80vw;
    }
    
    #toptable {
        display:block;
        width:70%;
        padding-top:10vw;  
        padding-left:auto;
    }
    
    #table1 {
        border-style: solid; 
        border-width: 5px 0px 0px 0px; 
        border-color: #fffcea;
        border-radius:30px 30px 0px 0px;
        font-size: 20px;
    }
    
    #webtable {
        width:70vw;
        margin:auto;
        padding-top:10vh; 
        padding-left:10vw;
        padding-right:10vw;
        display:block;
    }
    
    #A4 {
        position:absolute; 
        height:150%; 
        width:100%; 
        top:471%;
        background-color:#00A4B4;  
        padding-top: 64px; 
        z-index:10;
    }
    
    #toptop {
        width:80vw;
        border-radius:30px;
    }
    
    #bottom-table {
        width:80vw; 
        border-radius:30px; 
        color:#fffcea;
    }
    
    #course-list {
        background-color:#00A4B4; 
        color: #FFFCEA;
        width:80vw;
        border-style: solid; 
        border-width: 0.7vh 0.7vh 1px 0.7vh; 
        border-color: #fffcea;
        border-radius:30px 30px 0px 0px;
        font-size: 2.5vh;
    }
    
    #subsquare {
        border-style: solid; 
        border-width: 0.7vh 0px 0px 0px; 
        border-color: #fffcea;
        border-radius:30px 30px 0px 0px;
        font-size: 2.5vh;
    }
    
    .table-lines {
        border-style: solid;
        width:80vw;
        border-width: 0px 0.7vh;
        border-color: #fffcea;
        font-size: 1.56vh;
    }
    
}