html
{
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
  /* font-family: 'Oswald', sans-serif; */
  /* font-family: 'Encode Sans SC', sans-serif; */
  font-family: 'Open Sans', sans-serif;
  font-weight:400;
  transition: all 0.3s ease-out;
}

body
{
  font-size: large;
  margin:0;
  padding-bottom: 5%;
}

.header img
{
   margin-left:0;
   margin-right:0;
}


.logoPanel
{
   display: flex;
   width: 100%;
   margin-top: 1%;
   margin-bottom: 1%;
   justify-content: center;
}

.logo
{
	display:flex; 
	justify-content: center;
    border: 3px solid #1B95E2;
    border-radius: 20px;
	border-color: #22C5BE;
}


img.logo
{
    max-width:100%;
    height:auto;

}

.icn-intro
{
  display: flex;
  justify-content: center;
  background: linear-gradient(to left,#0087CC,#22C5BE);
  /* background: linear-gradient(to left,Aqua,Blue); */
}
p.icn-intro-statement
{
    display: block;
    font-size: xx-large;
    font-style: normal;
	font-family: 'Open Sans', sans-serif;
    font-weight: 800;
    padding: 10px;
    background: #FF7C66; /* Orange */
	color: #033D58;/* Navy */
	padding: 5%;
}
.icnArticle
{
   display:block;

   padding-top: 1%;
   padding-left: 1%;
   padding-right: 1%;
   padding-bottom: 10%;
   border-radius: 0px;
   border-width: 1px;
   border-style: solid;
   border-color: #22C5BE;
   margin: 0% 0% 1% 0%;
   background: url(images/wave.svg);
   background-repeat: no-repeat;
   background-position-y: bottom;
   height:20%;
}

article h2
{
  display: flex;
  padding-top:1%;
  padding-bottom: 5%;
  font-size: xx-large;
  font-weight: 700;
  justify-content: center;
  color: #FF7C66; /*Coral */
}

article h3
{
  display: flex;
  padding-top:1%;
  font-size: x-large;
  justify-content: flex-start;
  color: #345cbd;
}

article h4
{
  display: flex;	 
  padding-top: 1%;
  font-size: medium;
  color: #1f3778;
}

.publishDate
{
  display: flex;
  padding-top:1%;
  font-size: large;
  justify-content: center;
  color: #345cbd;
}
article p
{  
   padding-top: 2%;
   font-weight: 400;
   font-size: large;
   color: #0087CC;
   margin: 1%;

}
article ul
{
  list-style-type: square;
  list-style-position: inside;
  padding-top: 1%;
  padding-left: 1%;
}

article ul li
{
  padding: 5px;
  font-style: normal;
  font-size: large;
  font-weight: 700;
  color: #22C5BE;
}



/* Below Code is for Header and Footer and Menu */



.header
{
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  /* background-image: url("images/ripple.jpg"); */
  background: linear-gradient(to right,#033D58,#22C5BE);
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1%;
  z-index: 0;

}


.navMenu
{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 70%;
}


.content
{
   border: 1px blue solid;
}

.container
{
    display: flex;
    width: 100%;
    justify-content: center;
}


.articleList
{
   display: flex;
   flex-direction: column;
}

.footer
{
    position: fixed;
    color: #454545;
    background-color: #EEEEEE;
    bottom: 0;
    font-size: small;
    padding-top: 0.25%;
    padding-bottom: 0.25%;
    height:auto;
    width: 100%;
    text-align: center;
}

.navMenu ul
{
  display: flex;
  flex-direction: row; /* For mobile make column*/
  flex-wrap: wrap;
  list-style-type: none;
  margin: 0;
  padding: 0;
  color: 	#2c52af;
  justify-content: flex-start;
}


.menu
{
  display: block;
  width:auto;/* change to px if you want all items to be same */
  color: 	#1843D5;
  background-color: #22C5BE;
  font-size: large;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #033D58;
  border-radius: 5px;
  text-align: center;
  padding: 8px 16px;
  margin-bottom:20px;
  margin-right: 20px;
}
.rootMenu
{
    visibility: hidden;
    height: 0px;

}

.rootMenu img
{
    visibility: hidden;
    height: 0px;
    width:auto;
}

.item
{
  display: block;
  width:auto; /* change to px if you want all items to be same */
  color: #454545;
  background-color: #FEDB00;
  font-size: large;
  font-weight: bold;
  text-decoration: none;
  border: 1px solid #033D58;
  border-radius: 5px;
  text-align: center;
  padding: 8px 16px;
  margin-bottom: 20px;
  margin-right: 20px; /* For mobile make 0 and margin-left*/
}

/* Change the link color on hover */
li a.menu:hover
{
  background-color: #FF7C66;
  border: 1px solid #22C5BE;

}

li a.item:hover
{
  background-color: #FF7C66;
  border: 1px solid #22C5BE;
}

@media only screen and (min-width:1px) and (max-width: 640px)
{

  .header
  {
     flex-direction: column;
     align-items: center;
  }

  .rootMenu
{
    visibility: visible;
    height: 45px;

}

.rootMenu img
{
    visibility: visible;
    height: 15px;
    width:auto;
}
  p.icn-intro-statement
  {
    display: none;
  }

  img.logo
  {
      max-width:70%;
      height:auto;
      align-self: center;
  }

  ul
  {
      flex-direction: column;
      align-items: center;
      justify-content: center;
  }

  .menu
  {
      font-size: small;
      width:auto;
      margin-bottom: 5px;
  }

  .navMenu ul
	{
	  display: flex;
	  flex-direction: column; /* For mobile make column*/
	}

  .icnArticle
  {
    border-radius: 10px;
	margin: 1% 0% 1% 0%;
	display: flex;
	flex-direction: column;
  }
  
  .icnArticle h2
  {  
    justify-content: space-around;
  }
  
  article p
  {
	  font-size:medium;
  }

  .item
  {
      font-size: small;
      width:auto;
      margin-bottom: 5px;
  }

  .footer
  {
    font-size: small;
  }
}

/* Background effect */ 
@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}

.background {
    display: flex;
    width: 100%;
    overflow: hidden;
	background-image: url(../images/icn-logo.jpg);
	background-repeat:no-repeat;
    background-position: center center;
	z-index: -1;
}

.background img
{
	visibility: hidden;
}


.background span {
    width: 3vmin;
    height: 3vmin;
    border-radius: 0vmin;
    backface-visibility: hidden;
    position: relative;
    animation: move;
    animation-duration: 45;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
	overflow: hidden;
}

.background span:nth-child(0) {
    color: #0087cc;
    top: 63%;
    left: 33%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -7vw 10vh;
}
.background span:nth-child(1) {
    color: #0087cc;
    top: 39%;
    left: 48%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 2vw 18vh;
    box-shadow: -6vmin 0 1.5235225678828612vmin currentColor;
}
.background span:nth-child(2) {
    color: #ff7c66;
    top: 79%;
    left: 50%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -6vw 15vh;
    box-shadow: 6vmin 0 1.2778382390998406vmin currentColor;
}
.background span:nth-child(3) {
    color: #033d58;
    top: 21%;
    left: 2%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -5vw 3vh;
    box-shadow: 6vmin 0 1.1495995125639913vmin currentColor;
}
.background span:nth-child(4) {
    color: #0087cc;
    top: 63%;
    left: 100%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -8vw 13vh;
    box-shadow: 6vmin 0 1.5435071143137307vmin currentColor;
}
.background span:nth-child(5) {
    color: #22c5be;
    top: 22%;
    left: 4%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -17vw -14vh;
    box-shadow: -6vmin 0 1.0570583776808018vmin currentColor;
}
.background span:nth-child(6) {
    color: #fedb00;
    top: 27%;
    left: 75%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 23vw -8vh;
    box-shadow: 6vmin 0 1.5832136232761294vmin currentColor;
}
.background span:nth-child(7) {
    color: #033d58;
    top: 77%;
    left: 90%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -23vw -6vh;
    box-shadow: -6vmin 0 1.0639971541465834vmin currentColor;
}
.background span:nth-child(8) {
    color: #0087cc;
    top: 1%;
    left: 80%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -10vw -14vh;
    box-shadow: -6vmin 0 1.3415454514387954vmin currentColor;
}
.background span:nth-child(9) {
    color: #fedb00;
    top: 81%;
    left: 10%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -1vw 23vh;
    box-shadow: 6vmin 0 0.9336763232082823vmin currentColor;
}
.background span:nth-child(10) {
    color: #0087cc;
    top: 64%;
    left: 61%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 13vw -3vh;
    box-shadow: 6vmin 0 0.795598846131341vmin currentColor;
}
.background span:nth-child(11) {
    color: #fedb00;
    top: 39%;
    left: 14%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -14vw -7vh;
    box-shadow: -6vmin 0 1.1905603546836179vmin currentColor;
}
.background span:nth-child(12) {
    color: #033d58;
    top: 81%;
    left: 50%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -3vw -9vh;
    box-shadow: -6vmin 0 1.3358226604902215vmin currentColor;
}
.background span:nth-child(13) {
    color: #033d58;
    top: 58%;
    left: 83%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -23vw 18vh;
    box-shadow: -6vmin 0 0.8483205763686248vmin currentColor;
}
.background span:nth-child(14) {
    color: #22c5be;
    top: 28%;
    left: 40%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 24vw 22vh;
    box-shadow: -6vmin 0 1.3529203569199493vmin currentColor;
}
.background span:nth-child(15) {
    color: #22c5be;
    top: 74%;
    left: 24%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -8vw 1vh;
    box-shadow: 6vmin 0 1.296994132815606vmin currentColor;
}
.background span:nth-child(16) {
    color: #ff7c66;
    top: 65%;
    left: 44%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 13vw 1vh;
    box-shadow: 6vmin 0 1.657605746142646vmin currentColor;
}
.background span:nth-child(17) {
    color: #ff7c66;
    top: 12%;
    left: 90%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -1vw -1vh;
    box-shadow: -6vmin 0 1.2887839715826315vmin currentColor;
}
.background span:nth-child(18) {
    color: #22c5be;
    top: 39%;
    left: 54%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -5vw -16vh;
    box-shadow: 6vmin 0 0.7636919372942581vmin currentColor;
}
.background span:nth-child(19) {
    color: #22c5be;
    top: 100%;
    left: 71%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -23vw 8vh;
    box-shadow: -6vmin 0 1.2170332500172532vmin currentColor;
}
.background span:nth-child(20) {
    color: #0087cc;
    top: 3%;
    left: 60%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 2vw -23vh;
    box-shadow: 6vmin 0 1.4035476637511621vmin currentColor;
}
.background span:nth-child(21) {
    color: #22c5be;
    top: 35%;
    left: 23%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -14vw -17vh;
    box-shadow: -6vmin 0 1.337590159922912vmin currentColor;
}
.background span:nth-child(22) {
    color: #033d58;
    top: 82%;
    left: 29%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 18vw -19vh;
    box-shadow: 6vmin 0 0.7892725239501244vmin currentColor;
}
.background span:nth-child(23) {
    color: #033d58;
    top: 14%;
    left: 90%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 20vw -15vh;
    box-shadow: 6vmin 0 1.289660127966781vmin currentColor;
}
.background span:nth-child(24) {
    color: #fedb00;
    top: 4%;
    left: 28%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -18vw 5vh;
    box-shadow: 6vmin 0 1.543332039749644vmin currentColor;
}
.background span:nth-child(25) {
    color: #033d58;
    top: 46%;
    left: 63%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 3vw 13vh;
    box-shadow: -6vmin 0 0.9982287227562665vmin currentColor;
}
.background span:nth-child(26) {
    color: #fedb00;
    top: 76%;
    left: 89%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -11vw 2vh;
    box-shadow: 6vmin 0 1.1940421732541868vmin currentColor;
}
.background span:nth-child(27) {
    color: #ff7c66;
    top: 42%;
    left: 77%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -18vw -13vh;
    box-shadow: -6vmin 0 1.7093844197684802vmin currentColor;
}
.background span:nth-child(28) {
    color: #ff7c66;
    top: 32%;
    left: 83%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -22vw 21vh;
    box-shadow: -6vmin 0 1.5779534843466692vmin currentColor;
}
.background span:nth-child(29) {
    color: #22c5be;
    top: 60%;
    left: 48%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -7vw 21vh;
    box-shadow: 6vmin 0 1.2236554355371914vmin currentColor;
}
.background span:nth-child(30) {
    color: #033d58;
    top: 81%;
    left: 16%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 19vw 20vh;
    box-shadow: 6vmin 0 1.6746512443791246vmin currentColor;
}
.background span:nth-child(31) {
    color: #ff7c66;
    top: 66%;
    left: 15%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -18vw 13vh;
    box-shadow: 6vmin 0 1.400754127269762vmin currentColor;
}
.background span:nth-child(32) {
    color: #0087cc;
    top: 84%;
    left: 87%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -13vw 4vh;
    box-shadow: 6vmin 0 1.0663479535380418vmin currentColor;
}
.background span:nth-child(33) {
    color: #033d58;
    top: 16%;
    left: 28%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -5vw 17vh;
    box-shadow: -6vmin 0 1.649361052138041vmin currentColor;
}
.background span:nth-child(34) {
    color: #0087cc;
    top: 57%;
    left: 84%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 18vw -13vh;
    box-shadow: 6vmin 0 1.080560649412364vmin currentColor;
}
.background span:nth-child(35) {
    color: #0087cc;
    top: 55%;
    left: 67%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 14vw 24vh;
    box-shadow: -6vmin 0 1.7111800684976595vmin currentColor;
}
.background span:nth-child(36) {
    color: #033d58;
    top: 58%;
    left: 46%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 1vw 16vh;
    box-shadow: -6vmin 0 1.6722198391038112vmin currentColor;
}
.background span:nth-child(37) {
    color: #ff7c66;
    top: 96%;
    left: 52%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -8vw -23vh;
    box-shadow: 6vmin 0 0.8891245716042186vmin currentColor;
}
.background span:nth-child(38) {
    color: #0087cc;
    top: 89%;
    left: 7%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -16vw 4vh;
    box-shadow: -6vmin 0 1.2449447944832626vmin currentColor;
}
.background span:nth-child(39) {
    color: #0087cc;
    top: 48%;
    left: 78%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -15vw -12vh;
    box-shadow: 6vmin 0 1.1282887539920199vmin currentColor;
}
.background span:nth-child(40) {
    color: #0087cc;
    top: 32%;
    left: 81%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 7vw 5vh;
    box-shadow: -6vmin 0 1.0241741531904047vmin currentColor;
}
.background span:nth-child(41) {
    color: #0087cc;
    top: 62%;
    left: 9%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -2vw 0vh;
    box-shadow: -6vmin 0 1.3320762637198575vmin currentColor;
}
.background span:nth-child(42) {
    color: #0087cc;
    top: 37%;
    left: 97%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 6vw -2vh;
    box-shadow: 6vmin 0 1.5996759162956518vmin currentColor;
}
.background span:nth-child(43) {
    color: #033d58;
    top: 21%;
    left: 32%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -5vw -2vh;
    box-shadow: 6vmin 0 1.1838954084036213vmin currentColor;
}
.background span:nth-child(44) {
    color: #0087cc;
    top: 21%;
    left: 12%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 14vw 6vh;
    box-shadow: 6vmin 0 1.4086861540596256vmin currentColor;
}
.background span:nth-child(45) {
    color: #ff7c66;
    top: 75%;
    left: 41%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -13vw -18vh;
    box-shadow: 6vmin 0 1.4457591373591365vmin currentColor;
}
.background span:nth-child(46) {
    color: #033d58;
    top: 18%;
    left: 68%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 23vw -3vh;
    box-shadow: 6vmin 0 1.1528335772759457vmin currentColor;
}
.background span:nth-child(47) {
    color: #ff7c66;
    top: 18%;
    left: 36%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: -15vw -4vh;
    box-shadow: 6vmin 0 1.0865862427346356vmin currentColor;
}
.background span:nth-child(48) {
    color: #033d58;
    top: 68%;
    left: 41%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 1vw 10vh;
    box-shadow: -6vmin 0 1.3130914840771495vmin currentColor;
}
.background span:nth-child(49) {
    color: #0087cc;
    top: 2%;
    left: 88%;
    animation-duration: 6s;
    animation-delay: -1s;
    transform-origin: 21vw -22vh;
    box-shadow: -6vmin 0 1.4593325065103382vmin currentColor;
}