@charset "UTF-8";

/*Taken from Google Fonts*/
body {
   font-family: 'Baloo Da 2', sans-serif; 
}
body {
	background-color: rgb(196, 240, 242);
}
h1 {
	text-align: center;
	background-color: rgb(47, 119, 138);
	font-size: 2.5em;
	color: rgb(255, 255, 255);
}
h2 {
	text-align: center;
	background-color: rgb(47, 119, 138);
	font-size: 2em;
	color: rgb(255, 255, 255);
}
.p{
	text-align: left;
	font-size: 1.5em;
	color: rgb(0, 0, 0);
}
p {
	text-align: left;
	font-size: 1.5em;
	color: rgb(0, 0, 0);
	padding: 0px 120px 0px 120px;
}
.blackborder {
	border-style: solid;
	border-width: 4px;
	border-color: black;
	border-radius: 5px;
}
.width {
	width: 30%;
}
.floatright {
	float: right;
}
.clearfix {
	overflow: auto;
}

/*Taken from Google Fonts-->*/
.story-script-regular {
	font-family: Tiro Bangla;
}
ul {
	list-style-type: none; /* Remove the default bullet */
	padding: 12px;
	background-color: rgb(25, 70, 82);
	overflow: hidden;
}
ul li {
	float: left;
}
ul li a {
	color: white;
	text-decoration: none;
	padding: 14px 16px;
	display: block;
}
ul li a:hover {
	background-color: rgb(15, 53, 61);
}
.row {
 display: flex;
 justify-content: center;
}
* {
	  box-sizing: border-box;
	}
	
	
	.row {
	  display: -ms-flexbox; /* IE10 */
	  display: flex;
	  -ms-flex-wrap: wrap; /* IE10 */
	  flex-wrap: wrap;
	  padding: 0 12px;
	}
	
	/* Create four equal columns that sits next to each other */
	.column {
	  -ms-flex: 25%; /* IE10 */
	  flex: 25%;
	  max-width: 25%;
	  padding: 0 4px;
	}
	
	.column img {
	  margin-top: 8px;
	  vertical-align: middle;
	  width: 100%;
	}
	
	/* Responsive layout - makes a two column-layout instead of four columns */
	@media screen and (max-width: 800px) {
	  .column {
	    -ms-flex: 50%;
	    flex: 50%;
	    max-width: 50%;
	  }
	}
	
	/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
	@media screen and (max-width: 600px) {
	  .column {
	    -ms-flex: 100%;
	    flex: 100%;
	    max-width: 100%;
	  }
	}