@media screen and (max-width: 600px) {
  .column {
    	width: 100%;
 	 }
	}


/* Style the body */
body {
  	font-family: Arial, Helvetica, sans-serif;
  	margin: 0px;
	}

/* Header/logo Title */
.header {
  	padding: 10px;
  	text-align: center;
  	background: #008080;
  	color: white;
	}

/* Increase the font size of the heading */
.header h1 {
 	 font-size: 40px;
	}




/* Sticky navbar - toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed). The sticky value is not supported in IE or Edge 15 and earlier versions. However, for these versions the navbar will inherit default position */

.navbar {
  	overflow: hidden;
  	background-color: #333;
  	position: sticky;
  	position: -webkit-sticky;
  	top: 0;
	text-align: center;
	}

.navlow {
  	overflow: hidden;
  	background-color: #333;
  	position: absolute;
  	//position: -webkit-sticky;
  	top: 0;
	}

/* Style the navigation bar links */

.navbar a {
  	float: left;
  	display: block;
  	color: white;
  	padding: 14px 20px;
  	text-decoration: none;
	}


/* Right-aligned link */
.navbar a.right {
 	float: right;
	}

/* Change color on hover */
.navbar a:hover {
  	background-color: #ddd;
  	color: black;
	}

/* Active/current link */
.navbar a.active {
  	background-color: #677;
  	color: white;
	}

 .navbar {
	text-align: center;
	}

/* Main column */
 .main {    
  	background-color: #F5F5F5;
  	padding: 20px;
  	max-width: 1200px;
  	margin: 0 auto;   
	}


/* Footer */
.footer {
  	padding: 1px;
  	text-align: center;
   	color: white;
 	background: #008080;
	}

blockquote {
  	background: white;
 	 border-left: 10px solid #ccc;
  	margin: 1.5em 10px;
  	padding: 0.5em 10px;
  	quotes: "\201C""\201D""\2018""\2019";
	}


/* ----images section---- */

img{
   	max-width: 100%;
	display: block;
 	margin-left: auto;
 	margin-right: auto;
	}

.floatl	{
	 float: left;
	 width: 400px;
   	 padding: 6px;
	}
	
.floatr {
	 float: right;
	 width: 400px;
    	 padding: 6px;
	}

.nofloat
	{
	 width: 500px;
    	 padding: 6px;
	}

	
.main h1:before {
  	content:"\A  ";
	white-space: pre;
	}
	
	
.main h1:after {
	content:' ';
    	display:block;
    	border:2px solid #d0d0d0;
    	border-radius:4px;
    	-webkit-border-radius:4px;
    	-moz-border-radius:4px;
    	box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    	-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
    	-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .05);
	}

 
p.clear {
	clear: both;
     }

.container {
  	position: relative;
  	text-align: center;
  	color: white;
	}

/* --------text align section-------- */

.bottom-left {
 	 position: absolute;
  	bottom: 8px;
  	left: 16px;
	}


.top-left {
  	position: absolute;
  	top: 8px;
  	left: 16px;
	}


.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}


.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}


.centered {
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	}

.text-block {
  	position: absolute;
  	bottom: 20px;
  	right: 20px;
  	background-color: black;
  	color: white;
  	padding-left: 20px;
  	padding-right: 20px;
	}

.column {
  	float: left;
  	width: 50%;
	}

/* --------text align-------- */


/* Clear floats after the columns */

.row:after {
  	content: "";
  	display: table;
  	clear: both;
	}