@media only screen and (min-width: 360px) and (max-width: 374px){
	/* nokia - vertical */
	.timer-digits {
		color: red;
	}
	.section-top-bg {
        width: 100%;
        height: 200px;
        background-image: url(../images/top-bg.jpg);
        background-size: cover;
        background-position: 50.00% 90.00%;
        overflow: visible;
    }
	.intro-div {
		width: 100%;
        height: auto;
        margin-top: 35px;
        padding: 15px 15px 15px 15px;
        margin-left: auto;
        margin-right: auto;
       
    }
    .intro-div h4.lead {
		font-size: 80%; 
		font-weight: 400; 
		letter-spacing: 1px;
    }
	.timer-div {
		width:48%; 
		margin-top:-35px; 
		margin-left: auto; 
		margin-right: auto; 
		text-align: center;
	}
	
	.timer-section {
		float: left; 
		width: 32%; 
	}
	
	.timer-section-margin {
		margin-left:2%;
	}

	.timer-title {
		text-align: center; 
		color: #eeffff; 
		font-size:60%;
		letter-spacing: 1px;
	}
	
	.timer-digits {
		text-align: center;
		color: #eeffff;
		font-family: Noto Sans Display Bold; 
		font-size: 200%;
		letter-spacing: 1px;
		text-decoration: line-through solid #03115d;
		margin-top:-8px;
	}
	
	.welcome-section {
		margin-top:-50px !important;
	}
	
	.welcome-section h2 {
		margin-top: 50px;
		color:#000000; 
		font-size:150%;
	}
	
	.section-video-bg {
		width: 100%;
		height: auto;
		background-image: url(../images/circles-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: visible;
		
	}
	.section-inside-banner-bg {
		width: 100%;
		height: 80px;
		background-image: url(../images/inside-banner-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow:visible;
		margin-bottom:100px;
	}
	.content-inside-banner {
		 padding: 70px 30px 0px 30px;
		 float:left;
	}
	.content-inside-banner h1{
		 font-size: 35px;
	}
	.blog-content-area {	
		margin-top:-70px;
	}
	.section-inside-banner-dashboard-bg {
		width: 100%;
		height: 222px;
		background-image: url(../images/dashboard-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
	}

	.section-class2024-bg {
		width: 100%;
		height: 220px;
		background-image: url(../images/class2024-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
	}

	.section-download-bg {
		width: 100%;
		height: 380px;
		background-image: url(../images/download-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
		
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.section-trivia-bg {
		width: 100%;
		height: 380px;
		background-image: url(../images/trivia-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
		
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	
	.narrative_text {
		position:absolute; 
		top:10%; 
		left:5%; 
		padding:20px; 
		width:90%; 
		background-color:rgb(0, 0, 0, 0.7); 
	}

	.narrative_text p {
		font-size: 80%; 
		color:#FFFFFF; 
		font-style: italic; 
		text-align: justify;
	}


	/*Tabs CSS*/
	.tabs-container-programmes ul.nav{
		display: flex;
		flex-direction: column;
	}

	.tabs-container-programmes .panel-group .panel {
		margin-bottom: 16px;
	}

	.tabs-container-programmes .nav.card-header.nav-tabs li a {
		font-family: "Noto Sans Light";
	}

	.tabs-container-programmes .panel-default>.panel-heading a:after {
		display: none;
	}

	.tabs-container-programmes .nav-tabs {
		border-bottom: none;
	}

	.tabs-container-programmes .panel-group .panel-heading + .panel-collapse > .panel-body {
		border-top: none;
	}

	.panel .collapsed {
		padding: 10px 0 0 22px;
	}
	.panel-default>.panel-heading a[aria-expanded="true"] {
		background-color: transparent;
		color: #333333;
		font-family: 'Noto Sans Display Bold';
		text-decoration: none;
	}

	.tabs-container-programmes .nav-tabs .panel-title {
		display: block;
		margin: -10px -15px;
		padding: 0px 15px;
	}

	.tabs-container-programmes .nav-tabs li:nth-child(1) .panel-title a{
		display: block;
		margin: -10px -15px;
		padding: 20px 0 10px 32px;
	}
	/*Tabs CSS*/


}

@media only screen and (min-width: 375px) and (max-width: 414px){
	/* redmi - vertical */
	.timer-digits {
		color: yellow;
	}
	.section-top-bg {
        width: 100%;
        height: 200px;
        background-image: url(../images/top-bg.jpg);
        background-size: cover;
        background-position: 50.00% 90.00%;
        overflow: visible;
    }
	.intro-div {
		width: 100%;
        height: auto;
        margin-top: 35px;
        padding: 15px 15px 15px 15px;
        margin-left: auto;
        margin-right: auto;
       
    }
    .intro-div h4.lead {
		font-size: 90%; 
		font-weight: 400; 
		letter-spacing: 1px;
    }
	.timer-div {
		width:65%; 
		margin-top:0px; 
		margin-left: auto; 
		margin-right: auto; 
		text-align: center;
	}
	
	.timer-section {
		float: left; 
		width: 32%; 
	}
	
	.timer-section-margin {
		margin-left:2%;
	}

	.timer-title {
		margin-top: 0px;
		text-align: center; 
		color: #000000; 
		font-size:90%;
		letter-spacing: 1px;
	}
	
	.timer-digits {
		text-align: center;
		color: #000000;
		font-family: Noto Sans Display Bold; 
		font-size: 300%;
		letter-spacing: 1px;
		text-decoration: line-through solid #03115d;
		margin-top:-8px;
	}
	
	.welcome-section {
		margin-top:-20px !important;
	}
	
	.welcome-section h2 {
		margin-top: 50px;
		color:#000000; 
		font-size:160%;
	}
	
	.section-video-bg {
		width: 100%;
		height: auto;
		background-image: url(../images/circles-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: visible;
		
	}
	.section-inside-banner-bg {
		width: 100%;
		height: 80px;
		background-image: url(../images/inside-banner-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow:visible;
		margin-bottom:100px;
	}
	.content-inside-banner {
		 padding: 70px 30px 0px 30px;
		 float:left;
	}
	.content-inside-banner h1{
		 font-size: 35px;
	}
	.blog-content-area {	
		margin-top:-70px;
	}
	.section-inside-banner-dashboard-bg {
		width: 100%;
		height: 240px;
		background-image: url(../images/dashboard-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
	}

	.section-class2024-bg {
		width: 100%;
		height: 220px;
		background-image: url(../images/class2024-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
	}

	.section-download-bg {
		width: 100%;
		height: 380px;
		background-image: url(../images/download-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
		
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.section-trivia-bg {
		width: 100%;
		height: 380px;
		background-image: url(../images/trivia-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
		
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	.narrative_text {
		position:absolute; 
		top:10%; 
		left:5%; 
		padding:20px; 
		width:90%; 
		background-color:rgb(0, 0, 0, 0.7); 
	}

	.narrative_text p {
		font-size: 80%; 
		color:#FFFFFF; 
		font-style: italic; 
		text-align: justify;
	}

	/*Tabs CSS*/
	.tabs-container-programmes ul.nav{
		display: flex;
		flex-direction: column;
	}

	.tabs-container-programmes .panel-group .panel {
		margin-bottom: 16px;
	}

	.tabs-container-programmes .nav.card-header.nav-tabs li a {
		font-family: "Noto Sans Light";
	}

	.tabs-container-programmes .panel-default>.panel-heading a:after {
		display: none;
	}

	.tabs-container-programmes .nav-tabs {
		border-bottom: none;
	}

	.tabs-container-programmes .panel-group .panel-heading + .panel-collapse > .panel-body {
		border-top: none;
	}

	.panel .collapsed {
		padding: 10px 0 0 22px;
	}
	.panel-default>.panel-heading a[aria-expanded="true"] {
		background-color: transparent;
		color: #333333;
		font-family: 'Noto Sans Display Bold';
		text-decoration: none;
	}

	.tabs-container-programmes .nav-tabs .panel-title {
		display: block;
		margin: -10px -15px;
		padding: 0px 15px;
	}

	.tabs-container-programmes .nav-tabs li:nth-child(1) .panel-title a{
		display: block;
		margin: -10px -15px;
		padding: 20px 0 10px 32px;
	}
	/*Tabs CSS*/

}

@media only screen and (min-width: 551px) and (max-width: 624px){
	/* tablet - vertical */
	.timer-digits {
		color: green;
	}
	.section-top-bg {
        width: 100%;
        height: 300px;
        background-image: url(../images/top-bg.jpg);
        background-size: cover;
        background-position: 50.00% 90.00%;
        overflow: visible;
    }
	.intro-div {
		width: 100%;
        height: auto;
        margin-top: 65px;
        padding: 15px 15px 15px 15px;
        margin-left: auto;
        margin-right: auto;
       
    }
    .intro-div h4.lead {
		font-size: 110%; 
		font-weight: 400; 
		letter-spacing: 1px;
    }
	.timer-div {
		width:43%; 
		margin-top:-25px; 
		margin-left: auto; 
		margin-right: auto; 
		text-align: center;
	}
	
	.timer-section {
		float: left; 
		width: 32%; 
	}
	
	.timer-section-margin {
		margin-left:2%;
	}

	.timer-title {
		text-align: center; 
		color: #eeffff; 
		font-size:80%;
		letter-spacing: 1px;
	}
	
	.timer-digits {
		text-align: center;
		color: #eeffff;
		font-family: Noto Sans Display Bold; 
		font-size: 200%;
		letter-spacing: 1px;
		text-decoration: line-through solid #03115d;
		margin-top:15px;
	}
	
	.welcome-section {
		margin-top:-50px !important;
	}
	
	.welcome-section h2 {
		margin-top: 50px;
		color:#000000; 
		font-size:250%;
	}
	
	.section-video-bg {
		width: 100%;
		height: auto;
		background-image: url(../images/circles-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: visible;
		
	}
	.section-inside-banner-bg {
		width: 100%;
		height: 130px;
		background-image: url(../images/inside-banner-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow:visible;
		margin-bottom:100px;
	}
	.content-inside-banner {
		 padding: 70px 30px 0px 30px;
		 float:left;
	}
	.content-inside-banner h1{
		 font-size: 35px;
	}
	.blog-content-area {	
		margin-top:-70px;
	}
	.section-inside-banner-dashboard-bg {
		width: 100%;
		height: 370px;
		background-image: url(../images/dashboard-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
	}

	.section-class2024-bg {
		width: 100%;
		height: 320px;
		background-image: url(../images/class2024-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
	}

	.section-download-bg {
		width: 100%;
		height: 380px;
		background-image: url(../images/download-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
		
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.section-trivia-bg {
		width: 100%;
		height: 380px;
		background-image: url(../images/trivia-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
		
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	
	.narrative_text {
		position:absolute; 
		top:10%; 
		left:5%; 
		padding:20px; 
		width:90%; 
		background-color:rgb(0, 0, 0, 0.7); 
	}

	.narrative_text p {
		font-size: 80%; 
		color:#FFFFFF; 
		font-style: italic; 
		text-align: justify;
	}

	/*Tabs CSS*/
	.tabs-container-programmes ul.nav{
		display: flex;
		flex-direction: column;
	}

	.tabs-container-programmes .panel-group .panel {
		margin-bottom: 16px;
	}

	.tabs-container-programmes .nav.card-header.nav-tabs li a {
		font-family: "Noto Sans Light";
	}

	.tabs-container-programmes .panel-default>.panel-heading a:after {
		display: none;
	}

	.tabs-container-programmes .nav-tabs {
		border-bottom: none;
	}

	.tabs-container-programmes .panel-group .panel-heading + .panel-collapse > .panel-body {
		border-top: none;
	}

	.panel .collapsed {
		padding: 10px 0 0 22px;
	}
	.panel-default>.panel-heading a[aria-expanded="true"] {
		background-color: transparent;
		color: #333333;
		font-family: 'Noto Sans Display Bold';
		text-decoration: none;
	}

	.tabs-container-programmes .nav-tabs .panel-title {
		display: block;
		margin: -10px -15px;
		padding: 0px 15px;
	}

	.tabs-container-programmes .nav-tabs li:nth-child(1) .panel-title a{
		display: block;
		margin: -10px -15px;
		padding: 20px 0 10px 32px;
	}
	/*Tabs CSS*/
}

@media only screen and (min-width: 625px) and (max-width: 700px){
	/* nokia - horizontal */
	.timer-digits {
		color: blue;
	}
	.section-top-bg {
        width: 100%;
        height: 320px;
        background-image: url(../images/top-bg.jpg);
        background-size: cover;
        background-position: 50.00% 90.00%;
        overflow: visible;
    }
	.topnav a {
	  padding: 14px 15px 14px 15px;
	  font-size: 15px;
	  font-weight: 600;
	}
	.intro-div {
		width: 100%;
        height: auto;
        margin-top: 75px;
        padding: 15px 15px 15px 15px;
        margin-left: auto;
        margin-right: auto;
       
    }
    .intro-div h4.lead {
		font-size: 120%; 
		font-weight: 400; 
		letter-spacing: 1px;
    }
	.timer-div {
		width:42%; 
		margin-top:-28px; 
		margin-left: auto; 
		margin-right: auto; 
		text-align: center;
	}
	
	.timer-section {
		float: left; 
		width: 32%; 
	}
	
	.timer-section-margin {
		margin-left:2%;
	}

	.timer-title {
		text-align: center; 
		color: #eeffff; 
		font-size:80%;
		letter-spacing: 1px;
	}
	
	.timer-digits {
		text-align: center;
		color: #eeffff;
		font-family: Noto Sans Display Bold; 
		font-size: 220%;
		letter-spacing: 1px;
		text-decoration: line-through solid #03115d;
		margin-top:15px;
	}
	
	.welcome-section {
		margin-top:-70px !important;
	}
	
	.welcome-section h2 {
		margin-top: 50px;
		color:#000000; 
		font-size:250%;
	}
	
	.section-video-bg {
		width: 100%;
		height: auto;
		background-image: url(../images/circles-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: visible;
		
	}
	.section-inside-banner-bg {
		width: 100%;
		height: 130px;
		background-image: url(../images/inside-banner-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow:visible;
		margin-bottom:100px;
	}
	.content-inside-banner {
		 padding: 70px 30px 0px 30px;
		 float:left;
	}
	.content-inside-banner h1{
		 font-size: 35px;
	}
	.blog-content-area {	
		margin-top:-70px;
	}
	.section-inside-banner-dashboard-bg {
		width: 100%;
		height: 395px;
		background-image: url(../images/dashboard-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
	}

	.section-class2024-bg {
		width: 100%;
		height: 360px;
		background-image: url(../images/class2024-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
	}

	.section-download-bg {
		width: 100%;
		height: 380px;
		background-image: url(../images/download-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
		
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.section-trivia-bg {
		width: 100%;
		height: 380px;
		background-image: url(../images/trivia-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
		
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	
	.narrative_text {
		position:absolute; 
		top:10%; 
		left:5%; 
		padding:20px; 
		width:90%; 
		background-color:rgb(0, 0, 0, 0.7); 
	}

	.narrative_text p {
		font-size: 80%; 
		color:#FFFFFF; 
		font-style: italic; 
		text-align: justify;
	}
}

@media only screen and (min-width: 701px) and (max-width: 850px){
	/* redmi - horizontal */
	.timer-digits {
		color: brown;
	}
	.section-top-bg {
        width: 100%;
        height: 390px;
        background-image: url(../images/top-bg.jpg);
        background-size: cover;
        background-position: 50.00% 90.00%;
        overflow: visible;
    }
	.topnav a {
	  padding: 14px 15px 14px 15px;
	  font-size: 12px;
	  font-weight: 600;
	}
	.intro-div {
		width: 100%;
        height: auto;
        margin-top: 100px;
        padding: 15px 15px 15px 15px;
        margin-left: auto;
        margin-right: auto;
       
    }
    .intro-div h4.lead {
		font-size: 120%; 
		font-weight: 400; 
		letter-spacing: 1px;
    }
	.timer-div {
		width:41%; 
		margin-top: -18px; 
		margin-left: auto; 
		margin-right: auto; 
		text-align: center;
	}
	
	.timer-section {
		float: left; 
		width: 32%; 
	}
	
	.timer-section-margin {
		margin-left:2%;
	}

	.timer-title {
		text-align: center; 
		color: #eeffff; 
		font-size:80%;
		letter-spacing: 1px;
	}
	
	.timer-digits {
		text-align: center;
		color: #eeffff;
		font-family: Noto Sans Display Bold; 
		font-size: 290%;
		letter-spacing: 1px;
		text-decoration: line-through solid #03115d;
		margin-top:22px;
	}
	
	.welcome-section {
		margin-top:-70px !important;
	}
	
	.welcome-section h2 {
		margin-top: 50px;
		color:#000000; 
		font-size:300%;
	}
	
	.section-video-bg {
		width: 100%;
		height: auto;
		background-image: url(../images/circles-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: visible;
		
	}
	
	.section-inside-banner-bg {
		width: 100%;
		height: 160px;
		background-image: url(../images/inside-banner-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow:visible;
		margin-bottom:100px;
	}
	.content-inside-banner {
		 padding: 70px 30px 0px 30px;
		 float:left;
	}
	.content-inside-banner h1{
		 font-size: 35px;
	}
	.blog-content-area {	
		margin-top:-140px;
	}
	.section-inside-banner-dashboard-bg {
		width: 100%;
		height: 480px;
		background-image: url(../images/dashboard-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
	}

	.section-class2024-bg {
		width: 100%;
		height: 460px;
		background-image: url(../images/class2024-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
	}

	.section-download-bg {
		width: 100%;
		height: 380px;
		background-image: url(../images/download-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
		
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.section-trivia-bg {
		width: 100%;
		height: 380px;
		background-image: url(../images/trivia-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
		
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	
	.narrative_text {
		position:absolute; 
		top:10%; 
		left:5%; 
		padding:20px; 
		width:90%; 
		background-color:rgb(0, 0, 0, 0.7); 
	}

	.narrative_text p {
		font-size: 80%; 
		color:#FFFFFF; 
		font-style: italic; 
		text-align: justify;
	}
}

@media only screen and (min-width: 851px) and (max-width: 1030px){
	/* tablet - horizontal */
	.timer-digits {
		color: black;
	}
	.section-top-bg {
        width: 100%;
        height: 510px;
        background-image: url(../images/top-bg.jpg);
        background-size: cover;
        background-position: 50.00% 90.00%;
        overflow: visible;
		
    }
	/* Style the links inside the navigation bar */
	.topnav a {
	  padding: 14px 25px 14px 25px;
	  font-size: 14px;
	  font-weight: 600;
	}
	.intro-div {
		width: 100%;
        height: auto;
        margin-top: 140px;
        padding: 15px 15px 15px 15px;
        margin-left: auto;
        margin-right: auto;
       
    }
    .intro-div h4.lead {
		font-size: 150%; 
		font-weight: 400; 
		letter-spacing: 1px;
    }
	.timer-div {
		width:41%; 
		margin-top: -8px; 
		margin-left: auto; 
		margin-right: auto; 
		text-align: center;
	}
	
	.timer-section {
		float: left; 
		width: 32%; 
	}
	
	.timer-section-margin {
		margin-left:2%;
	}

	.timer-title {
		text-align: center; 
		color: #eeffff; 
		font-size:100%;
		letter-spacing: 1px;
	}
	
	.timer-digits {
		text-align: center;
		color: #eeffff;
		font-family: Noto Sans Display Bold; 
		font-size: 420%;
		letter-spacing: 1px;
		text-decoration: line-through solid #03115d;
		margin-top:34px;
	}
	
	.welcome-section h2 {
		margin-top: 50px;
		color:#000000; 
		font-size:300%;
	}
	
	.section-video-bg {
		width: 100%;
		height: 400px;
		background-image: url(../images/circles-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: visible;
		
	}
	
	.tab .nav-tabs li a{
		font-size: 20px;
		font-weight: 700;
		padding: 10px 44px 10px 44px;
	}
	
	.section-inside-banner-bg {
		width: 100%;
		height: 220px;
		background-image: url(../images/inside-banner-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow:visible;
		margin-bottom:100px;
	}
	.content-inside-banner {
		 padding: 70px 30px 0px 30px;
		 float:left;
	}
	.content-inside-banner h1{
		 font-size: 35px;
	}
	.blog-content-area {	
		margin-top:-160px;
	}
	.section-inside-banner-dashboard-bg {
		width: 100%;
		height: 635px;
		background-image: url(../images/dashboard-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
	}

	.section-class2024-bg {
		width: 100%;
		height: 560px;
		background-image: url(../images/class2024-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
	}

	.section-download-bg {
		width: 100%;
		height: 380px;
		background-image: url(../images/download-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
		
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.section-trivia-bg {
		width: 100%;
		height: 380px;
		background-image: url(../images/trivia-bg.jpg);
		background-size: cover;
		background-position: 50.00% 90.00%;
		overflow: hidden;
		
		margin-top: 20px;
		margin-bottom: 20px;
	}
	
	
	.narrative_text {
		position:absolute; 
		top:10%; 
		left:5%; 
		padding:20px; 
		width:90%; 
		background-color:rgb(0, 0, 0, 0.7); 
	}

	.narrative_text p {
		font-size: 80%; 
		color:#FFFFFF; 
		font-style: italic; 
		text-align: justify;
	}
	
}


/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 700px) 
{
	.topnav a:not(:first-child) {display: none;}
	.topnav a.icon 
	{
		float: right;
		display: block;
	}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 700px) 
{
	.topnav.responsive {position: relative;}
	.topnav.responsive a.icon 
	{
		position: absolute;
		right: 0;
		top: 0;
	}
	.topnav.responsive a 
	{
		float: none;
		display: block;
		text-align: left;
	}
}