@media only screen and (min-width: 481px)

{		
		*
		{
			margin:0px;
			padding:2px;
			box-sizing:border-box;
			font-family:Arial;
		}
		

		body
		{
			background-image: url(images/seaedge.png);
			background-size:100%;
		}

		#logo-div
		{
			width:100%;
			background-color:#800080;
			padding-left:2%;
			margin-bottom:15px;
			background-image: url(images/banner.png);
		}

		#nav-div
		{
			width:100%;
			background-color:#9F2B68;
			text-align:center;
			margin-bottom:15px;
			font-color:#ffffff;
			font-size:20px;
			background-image: url(images/banner.png);
		}



		#header-banner-div
		{
			width:100%;
			background-image: url(images/banner.png);
			text-align:center;
			margin-bottom:15px;
			min-height:70px;
		}

		#main-div
		{
			width:100%;
			margin-bottom:35px;
		}

		#sidebar-div
		{
			width:25%;
			background-color:#702963;
			float:left;
			text-align:center;
			color:#ffffff;
  text-align: justify;
  text-justify: inter-word;
		}

		#bodyarea-div
		{
			width:65%;
			background-color:#9F2B68;
			float:right;
			text-align:center;
  text-align: justify;
  text-justify: inter-word;
	
		}

		.clearfix::after
		{
			content:"";
			display:block;
			clear:both;
		}

		#footer-div
		{
			width:100%;
			background-color:#800080;
			text-align:center;
			min-height:100px;
			background-image: url(images/banner.png);
		}

		#wrapper-div
		{
			width:90%;
			margin:auto;
		}



		.flex-container
		{
			display:flex;
			background-color:light-gray;
			text-color:black;
			flex-wrap:wrap;
			flex-direction:row;
		}

		ul 
		{
			display:flex;
			flex-direction:row;
  			list-style-type: none;
			flex-wrap:wrap;
  			width:100%;
  			padding-left:0px;
			background-color:#9F2B68;
		}

		li
		{
    			list-style: none;
    			width: calc(100% / 3);
    			text-align: center;
			border:5px;
		}


		.box-icons{
justify-content: center;
display: flex;
gap: 35px;
}

.box-icons p{
display: flex;
align-items: center;
justify-content: center;
font-size: 25px;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
transition: 0.5s;
color: #;
}

.box-icons p:hover{
background-color: #78CDD7;
color:#ffffff;
box-shadow: 0 0 15px #78CDD7;
}
		

a:link {
  color:#ffffff;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color:#000000;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color:#ffffff;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color:#000000;
  background-color: transparent;
  text-decoration: underline;
}

p
{
	margin-left:1%;
	margin-right:1%;
}

h1
{
	color:#ffffff;
}

h2
{
	color:#ffffff;
}


h3
{
	color:#ffffff;
}


}


@media  only screen and (max-width: 1280px)
{
	

		*		
		{
			margin:0px;
			padding:2px;
			box-sizing:border-box;
			font-family:Arial;
		}

		body
		{
			background-image: url(images/seaedge.png);
			background-size:100%;
		}

		#logo-div
		{
			width:100%;
			background-color:#800080;
			padding-left:2%;
			margin-bottom:15px;
		}

		#nav-div
		{
			width:100%;
			background-color:darkgray;
			text-align:center;
			margin-bottom:15px;
			font-color:#000000;
			font-size:20px;
		}

		#header-banner-div
		{
			width:100%;
			background-color:lightgray;
			text-align:center;
			margin-bottom:15px;
			min-height:35px;
		}

		#main-div
		{
			width:100%;
			margin-bottom:35px;
		}
		
		#sidebar-div
		{
			width:100%;
			background-color:#702963;
			float:left;
			text-align:center;
			color:#ffffff;
			margin-bottom:10px;
		}

		#bodyarea-div
		{
			width:100%;
			background-color:#9F2B68;
			float:left;
			text-align:center;
			margin:
		}

		.clearfix:after
		{
			content:"";
			display:block;
			clear:both;
		}

		#footer-div
		{
			width:100%;
			background-color:#800080;
			text-align:center;
			min-height:100px;
		}

		#wrapper-div
		{
			width:90%;
			margin:auto;
		}



		.flex-container
		{
			display:flex;
			background-color:light-gray;
			text-color:black;
			flex-wrap:wrap;
			flex-direction:row;
		}

 
		ul 
		{
			display:flex;
			flex-direction:row;
  			list-style-type: none;
			flex-wrap:wrap;
  			width:100%;
  			padding-left:0px;
			background-color:#9F2B68;
		}

		li
		{
    			list-style: none;
    			display: inline-block;
    			width: calc(100% / 3);
    			text-align: center;
			border:5px;
		}

		.flex-container > div 
		{
  			background-color: #f1f1f1;
  			width: 100px;
  			margin: 10px;
  			text-align: center;
  			line-height: 75px;
  			font-size: 30px;
		}


a:link {
  color:#ffffff;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color:#000000;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color:#ffffff;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color:#000000;
  background-color: transparent;
  text-decoration: underline;
}

p
{
	margin-left:1%;
	margin-right:1%;
}


}