@media screen {

	body {
	font-family: Arial, Helvetica, sans-serif;
	}

	.skip { 
	color: white;
	}

	header {text-align: center;
			border-bottom: groove;
			border-width: thin;}

	figure {
		max-width: 18.5%;
		margin: auto;
		text-align: center;
		float: left;
		size: contain;
	}

		.figure {
			width: 20%;
			margin: auto;
			text-align: center;
			float: right;
			size: contain;
			padding: 10px;
	}

		.figure1 {
			width: auto;
			margin: auto;
			text-align: center;
			size: contain;
			padding: 10px;
		}

	figcaption {
		size: contain;

	}

	nav {
		background: linear-gradient(to right, #008C45 0%, #ffffff 100%);
		border-color: white;
		list-style-type: none;
		margin-left: 19%;
		padding: 1%;
		text-align: left;
		width: 80%;
	}
	
	#image {
			display: block;
			float: right;
			padding-left: 1px;
			max-width: 100%;
			height: auto;
		}

	img {
			display: block; 
			margin-inline-start: 0px; /*Adjusted to move image to the left*/
			float: both;
			max-width: 100%;
		}
		.img3 {
			display: grid;
			height: 50px;
			width: 80px;
		}

	#navsidebarimage {
		background-image: url(images/fr_icsi_backcover_blank.jpg);
		background-size: contain;
		background-position: left top;
		background-repeat: no-repeat;
		height: 60%;
		list-style-type: none;
		list-style-position: outside;
		position: absolute;
		width: 18.5%;
		display: inline-block;
		}
		
		#imagecaptionsidebar{
			font-size: small;
			position: relative;
			text-align: center;
			top: 375px;
		}
	
	.a {
		color: white;
	}
	
	a:link {
		color:black ;
	}

	a:visited {
  color: blue
	}

		.ulbar {
			padding: 1%;
			display: inline;
			width: 80%;
			color: whitesmoke;
		}
			.li {
				padding: inherit;
				display: inline;
				width: 80%;
			}

				.limenu {
				padding: 2.5%;
				display: inline-block;
				width: 160px;
			}

			.dropmenu {
				position: relative;
				display: inline-block;
				padding: 0px;/*added to reduce padding*/
			}

			.dropmenu-content {
				display: none;
				position: absolute;
				background: linear-gradient(to right, green 0%, #ffffff 100%);
				border-style: groove;
				border-width: thin;
				text-align: left;
				min-width: 170px;
				padding: inherit;
				z-index: 1;
			}

			.dropmenu-content-aldo {
				display: none;
				position: absolute;
				background: linear-gradient(to right, green 0%, #ffffff 100%);
				border-style: groove;
				border-width: thin;
				text-align: left;
				min-width: 170px;
				padding: inherit;
				z-index: 1;
			}

			.dropmenu-content-roberto {
				display: none;
				position: absolute;
				background: linear-gradient(to right, green 0%, #ffffff 100%);
				border-style: groove;
				border-width: thin;
				text-align: left;
				min-width: 170px;
				padding: inherit;
				z-index: 1;
			}
			.dropmenu:hover .dropmenu-content {
				display: block;
			}

			.dropmenu:hover .dropmenu-content-aldo {
				display: block;
			}

			.dropmenu:hover .dropmenu-content-roberto {
				display: block;
			}

			h4 {
				text-align: center;
			}

	section {
		font-size: large;
		margin-left: 18%;
		margin-right: 0%;
		padding-left: 1%;
		padding-right: 1%;
		position: relative;
		width: 80%;
		}

		.libody {
			padding: 1%;
			width: auto;
		}
		
		.navb01 {
			border: groove;
			border-width: thin;
			list-style-type: none;
			text-align: left;
			padding-left: 10px;
			width: 100%;
			height: 100%;
			float: left;
			margin-bottom: 5px;
		}

		.navb02 {
			border: groove;
			border-width: thin;
			list-style-type: none;
			text-align: left;
			padding-left: 5px;
			width: 100%;
			height: 100%;
			float: left;
			margin-bottom: 5px;
		}

		.navb03 {
			display: grid;
			border: groove;
			border-width: thin;
			list-style-type: none;
			text-align: center;
			padding-left: 5px;
			width: 90%;
			height: 100%;
			float: left;
			margin-bottom: 5px;
		}

		table {
			width: auto;
			border-collapse: collapse;
			display: flex;
		}
			th {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			}

			.thcolor {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			background-color: #dddbdb;
			}
			.thcolorleft{
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: left;
			background-color: #dddbdb;
			}

			td {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			}

			.tdright {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: right;
			}

			.tdcenter {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			}

	footer {
		background: linear-gradient(to right, #CD212A 0%, #ffffff 100%);
		font-size: medium;
		list-style-type: none;
		text-align: center;
		margin-left: auto;
		width: 100%;
		padding: .6%;
		clear: both;
	}
}
@media screen and (orientation: landscape) and (max-width: 900px){
	
	body {
	font-family: Arial, Helvetica, sans-serif;
	}

	.skip { 
	color: white;
	}

	header {text-align: center;
			border-bottom: groove;
			border-width: thin;
		}

	figure {
		max-width: 18%; /*Adjusted for ipag*/
		margin: auto;
		text-align: center;
		float: left;
		object-fit: contain;
	}

	figcaption {
		size: contain;
	}

	nav {
		background: linear-gradient(to right, #008C45 0%, #ffffff 100%);
		border-color: white;
		list-style-type: none;
		margin-left: 19%;
		padding: .1%;
		text-align: left;
		width: 80%;
		}
	
	#image {
			display: block;
			float: right;
			padding-left: 1px;
			max-width: 50%;
			text-align: center;
			margin:auto;
		}

		.figure1 {
		float: left;
		margin: auto;
		max-width: 100%;
		}

		.figcaption1 {
		float: left;
		margin: auto;
		width: 250px;
		text-align: center;
		}

	#navsidebarimage {
			background-image: url(images/fr_icsi_backcover_blank.jpg);
			background-position: left top;
			background-repeat: no-repeat;
			background-size: contain;
			height: 60%;
			list-style-type: none;
			list-style-position: outside;
			position: absolute;
			width: 18%;
			display:inline;
		}
		
		#imagecaptionsidebar{
			font-size: x-small;
			position: relative;
			text-align: center;
			top: 220px;
		}

		.imagecaption {
			font-size: small;
			height: auto;
			padding-left: 5px;
			position: relative;
			text-align: center;
			width: auto;
		}

	.a {
		color: white;
	}
	
	a:link {
		color:black ;
	}

	a:visited { color: blue
	}

		.ulbar {
			padding: 1%;
			display: inline;
			width: 80%;
			color: whitesmoke;
		}
			.li {
				padding: inherit;
				display: inline;
				width: 80%;
			}

				.limenu {
				padding: 2.5%;
				display: inline-block;
				width: 160px;
			}

			.dropmenu {
				position: relative;
				display: inline-block;
				padding: 0px;/*added to reduce padding*/
			}

			.dropmenu-content {
				display: none;
				position: absolute;
				background: linear-gradient(to right, green 0%, #ffffff 100%);
				border-style: groove;
				border-width: thin;
				text-align: left;
				min-width: 160px;
				padding: inherit;
				z-index: 1;
			}

			.dropmenu-content-aldo {
				display: none;
				position: absolute;
				background: linear-gradient(to right, green 0%, #ffffff 100%);
				border-style: groove;
				border-width: thin;
				text-align: left;
				min-width: 160px;
				padding: inherit;
				z-index: 1;
			}

			.dropmenu-content-roberto {
				display: none;
				position: absolute;
				background: linear-gradient(to right, green 0%, #ffffff 100%);
				border-style: groove;
				border-width: thin;
				text-align: left;
				min-width: 170px;
				padding: inherit;
				z-index: 1;
			}
			.dropmenu:hover .dropmenu-content {
				display: block;
			}

			.dropmenu:hover .dropmenu-content-aldo {
				display: block;
			}

			.dropmenu:hover .dropmenu-content-roberto {
				display: block;
			}

	section {
		display: grid; /*added grid for iphone*/
		font-size: large;
		margin-left: 18%; /*changes margin to 0*/
		margin-right: 0%;
		padding-left: 1%;
		padding-right: 1%;
		position: relative;
		width: 80%;
		}

		.libody {
			padding: 1%;
			width: auto;
		}
		
		.navb01 {
		border: groove;
		border-width: thin;
		list-style-type: none;
		text-align: left;
		padding-left: 10px;
		width: 100%;/*Changed from auto to 100%*/
		height: 100%;
		float: left;
		margin-bottom: 5px;
		clear: both;
		}

		.navb02 {
		border: groove;
		border-width: thin;
		list-style-type: none;
		text-align: left;
		padding-left: 5px;
		width: 55%;
		height: 100%;
		float: left;
		margin-bottom: 5px;
		}

		.navb03 {
			display: grid;
			border: groove;
			border-width: thin;
			list-style-type: none;
			text-align: center;
			padding-left: 5px;
			width: 90%;
			height: 100%;
			float: left;
			margin-bottom: 5px;
		}

		table {
			width: auto;
			border-collapse: collapse;
			display: flex;
			}
			th {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			}

			.thcolor {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			background-color: #dddbdb;
			}

			.thcolorleft{
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: left;
			background-color: #dddbdb;
			}

			td {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			}

			.tdright {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: right;
			}

			.tdcenter {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			}

	footer {
		background: linear-gradient(to right, #CD212A 0%, #ffffff 100%);
		font-size: medium;
		list-style-type: none;
		text-align: center;
		margin-left: auto;
		width: 100%;
		padding: .6%;
		clear: both;
	}
}
@media screen and  (orientation: portrait) and (min-width: 600px) and (max-width: 900px){
	
	body {
	font-family: Arial, Helvetica, sans-serif;
	}

	.skip { 
	color: white;
	}

	header {text-align: center;
			border-bottom: groove;
			border-width: thin;
		}

	figure {
		max-width: 18%; /*Adjusted for ipag*/
		margin: auto;
		text-align: center;
		float: left;
		size: contain;
	}

	figcaption {
		size: contain;
	}

	.figure1 {
		width: auto;
		margin: auto;
		text-align: center;
		size: contain;
		padding: 10px;
	}

	nav {
		background: linear-gradient(to right, #008C45 0%, #ffffff 100%);
		border-color: white;
		list-style-type: none;
		margin-left: 19%;
		padding: .1%;
		text-align: left;
		width: 80%;
		}
	
	#image {
			display: block;
			float: right;
			padding-left: 1px;
			max-width: 50%;
			text-align: center;
			margin:auto;
		}

	#navsidebarimage {
			background-image: url(images/fr_icsi_backcover_blank.jpg);
			background-position: left top;
			background-repeat: no-repeat;
			background-size: contain;
			height: 60%;
			list-style-type: none;
			list-style-position: outside;
			position: absolute;
			width: 18%;
			display:inline;
		}
		
		#imagecaptionsidebar{
			font-size: x-small;
			position: relative;
			text-align: center;
			top: 220px;
		}

		.imagecaption {
			font-size: small;
			height: auto;
			padding-left: 5px;
			position: relative;
			text-align: center;
			width: auto;
		}

	.a {
		color: white;
	}
	
	a:link {
		color:black ;
	}

	a:visited { color: blue
	}

		.ulbar {
			padding: 1%;
			display: inline;
			width: 80%;
			color: whitesmoke;
		}
			.li {
				padding: inherit;
				display: inline;
				width: 80%;
			}

				.limenu {
				padding: 2.5%;
				display: inline-block;
				width: 160px;
			}

			.dropmenu {
				position: relative;
				display: inline-block;
				padding: 0px;/*added to reduce padding*/
			}

			.dropmenu-content {
				display: none;
				position: absolute;
				background: linear-gradient(to right, green 0%, #ffffff 100%);
				border-style: groove;
				border-width: thin;
				text-align: left;
				min-width: 160px;
				padding: inherit;
				z-index: 1;
			}

			.dropmenu-content-aldo {
				display: none;
				position: absolute;
				background: linear-gradient(to right, green 0%, #ffffff 100%);
				border-style: groove;
				border-width: thin;
				text-align: left;
				min-width: 160px;
				padding: inherit;
				z-index: 1;
			}

			.dropmenu-content-roberto {
				display: none;
				position: absolute;
				background: linear-gradient(to right, green 0%, #ffffff 100%);
				border-style: groove;
				border-width: thin;
				text-align: left;
				min-width: 170px;
				padding: inherit;
				z-index: 1;
			}
			.dropmenu:hover .dropmenu-content {
				display: block;
			}

			.dropmenu:hover .dropmenu-content-aldo {
				display: block;
			}

			.dropmenu:hover .dropmenu-content-roberto {
				display: block;
			}

	section {
		display: grid;
		font-size: large;
		margin-left: 18%; /*changes margin to 0*/
		margin-right: 0%;
		padding-left: 1%;
		padding-right: 1%;
		position: relative;
		width: 80%;
		}

		.libody {
			padding: 1%;
			width: auto;
		}
		
		.navb01 {
		border: groove;
		border-width: thin;
		list-style-type: none;
		text-align: left;
		padding-left: 10px;
		width: 100%; /*changes for Iphone*/
		height: 100%;
		float: left;
		margin-bottom: 5px;
		clear: both;
		}

		.navb02 {
		border: groove;
		border-width: thin;
		list-style-type: none;
		text-align: left;
		padding-left: 5px;
		width: 55%;
		height: 100%;
		float: left;
		margin-bottom: 5px;
		}
		.navb03 {
			display: grid;
			border: groove;
			border-width: thin;
			list-style-type: none;
			text-align: center;
			padding-left: 5px;
			width: 80%;
			height: 100%;
			float: left;
			margin-bottom: 5px;
		}

		table {
			width: auto;
			border-collapse: collapse;
			display: flex;
			}
			th {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			}

			.thcolor {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			background-color: #dddbdb;
			}

			.thcolorleft{
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: left;
			background-color: #dddbdb;
			}

			td {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			}

			.tdright {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: right;
			}

			.tdcenter {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			}

	footer {
		background: linear-gradient(to right, #CD212A 0%, #ffffff 100%);
		font-size: medium;
		list-style-type: none;
		text-align: center;
		margin-left: auto;
		width: 100%;
		padding: .6%;
		clear: both;
	}
}
@media screen and (orientation: portrait) and (max-width: 450px) {

	body {
		font-family: Arial, Helvetica, sans-serif;
	}

	.skip { 
	color: white;
	}

	header {text-align: center;
			border-bottom: groove;
			border-width: thin;
		}

		figure {
		max-width: 18.5%;
		margin: auto;
		text-align: center;
		float: left;
		size: contain;
		display: none;
	}

	figcaption {
		size: contain;
	}

		.figure1 {
		float: left;
		margin: auto;
		max-width: 100%;
		display: block;
		
	}

		.figcaption1 {
		float: left;
		margin: auto;
		width: 250px;
		text-align: center;
		display: none;
	}

	nav {
		background: linear-gradient(to right, #008C45 0%, #ffffff 100%);
		border-color: white;
		list-style-type: none;
		margin-left: 0%;
		padding: 1%;
		text-align: left;
		width: 100%;
		}
	
	#image {
			display: block;
			float: left;
			padding-left: 1px;
			max-width: 100%;
			margin: 15%;
		}

		.figure1 {
		float: left;
		margin: auto;
		max-width: 100%;
		display: none;
		}

		.figcaption1 {
		float: left;
		margin: auto;
		width: 250px;
		text-align: center;
		display: none;
		}

	#navsidebarimage {
			background-image: url(images/fr_icsi_backcover_blank.jpg);
			background-size: contain;
			background-position: left top;
			background-repeat: no-repeat;
			height: 60%;
			list-style-type: none;
			list-style-position: outside;
			position: absolute;
			width: 18.5%;
			display: none;
		}
		
		#imagecaptionsidebar{
			font-size: x-small;
			position: relative;
			text-align: center;
			top: 400px;
		}

		.imagecaption {
			font-size: small;
			height: auto;
			padding-left: 5px;
			position: relative;
			text-align: center;
			width: auto;
		}
		
	.a {
		color: white;
	}
	
	a:link {
		color:black ;
	}

	a:visited { color: blue
	}

		.ulbar {
			padding: 1%;
			display: inline;
			width: 100%;
			color: whitesmoke;
		}
			.li {
				padding: inherit;
				display: inline;
				width: 100%;
			}

				.limenu {
				padding: 2.5%;
				display: inline-block;
				width: 160px;
			}

			.dropmenu {
				position: relative;
				display: inline-block;
				padding: 0px;/*added to reduce padding*/
			}

			.dropmenu-content {
				display: none;
				position: absolute;
				background: linear-gradient(to right, green 0%, #ffffff 100%);
				border-style: groove;
				border-width: thin;
				text-align: left;
				min-width: 170px;
				padding: inherit;
				z-index: 1;
			}

			.dropmenu-content-aldo {
				display: none;
				position: absolute;
				background: linear-gradient(to right, green 0%, #ffffff 100%);
				border-style: groove;
				border-width: thin;
				text-align: left;
				min-width: 170px;
				padding: inherit;
				z-index: 1;
			}

			.dropmenu-content-roberto {
				display: none;
				position: absolute;
				background: linear-gradient(to right, green 0%, #ffffff 100%);
				border-style: groove;
				border-width: thin;
				text-align: left;
				min-width: 170px;
				padding: inherit;
				z-index: 1;
			}
			.dropmenu:hover .dropmenu-content {
				display: block;
			}

			.dropmenu:hover .dropmenu-content-aldo {
				display: block;
			}

			.dropmenu:hover .dropmenu-content-roberto {
				display: block;
			}

	section {
		font-size: large;
		margin-left: 0%; /*changes margin to 0*/
		margin-right: 0%;
		padding-left: 1%;
		padding-right: 1%;
		position: relative;
		width: auto;
		}

		.libody {
			padding: 1%;
			width: auto;
		}
		
		.navb01 {
		border: groove;
		border-width: thin;
		list-style-type: none;
		text-align: left;
		padding-left: 5px;
		width: 100%;
		height: 100%;
		float: left;
		margin-bottom: 5px;
		clear: both;
		}

		.navb02 {
		border: groove;
		border-width: thin;
		list-style-type: none;
		text-align: left;
		padding-left: 5px;
		width: 100%;
		height: 100%;
		float: left;
		margin-bottom: 5px;
		clear: both;
		}

		.navb03 {
			display: grid;
			border: groove;
			border-width: thin;
			list-style-type: none;
			text-align: center;
			padding-left: 5px;
			width: 100%;
			height: 100%;
			float: left;
			margin-bottom: 5px;
		}
		

		table {
			width: auto;
			border-collapse: collapse;
			display: flex;
		}
			th {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			}

			.thcolor {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			background-color: #dddbdb;
			}
			.thcolorleft{
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: left;
			background-color: #dddbdb;
			}

			td {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			}

			.tdright {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: right;
			}

			.tdcenter {
			padding: 4px;
			border: groove;
			border-width: 1px;
			text-align: center;
			}

	footer {
		background: linear-gradient(to right, #CD212A 0%, #ffffff 100%);
		font-size: medium;
		list-style-type: none;
		text-align: center;
		margin-left: auto;
		width: 100%;
		padding: .6%;
		clear: both;
	}
}

@media print {

header {
		text-align: center;
		font:12px;
		}

	.img3 {display: none;
		}

body {
	margin:0;
	padding:0;
	line-height: 1.5em;
	word-spacing:1px;
	letter-spacing:0.2px;
	font: 12px;
	font-family: Arial, Helvetica, "Lucida Grande", serif;
	color: #000;
	}

	h2 {text-align: center}

	#image {text-align: center}

/*Remove Element*/
	nav, footer, #imagecaptionsidebar, .skip {
	display:none;
	}

/* Show URL */

	a:link, a:visited, a:after {
		background: transparent;
		color:#333;
		content: " (" attr(href) ")";
	}

}