@charset "utf-8";


.aotext ol li {
	margin-top: 10px;
}


.aoarticlescontainer {
  border: 2px solid #fafafc;
  border-inline-start-color: #222453;
  box-shadow: 10px 10px 5px #e4e4ef;
    background-color: #fafafc;
	  border-radius: 5px;
  padding: 16px;
  margin: 16px 0
  
  
  
 }
 
 .aobox:hover {
	 box-shadow: 10px 10px 5px #e4e4ef;
	 	 transition: box-shadow 0.2s ease;}
		 
 
.aozoom:hover {
	box-shadow: 10px 10px 5px #e4e4ef;
	 transition: box-shadow 0.2s ease;
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.05); 
}

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

.aoarticlescontainer img {
  float: left;
  margin-right: 20px;
  border-radius: 40%;
}

.aoarticlescontainer span {
  font-size: 20px;
  margin-right: 35px;
  
}

@media (max-width: 500px) {
  .aoarticlescontainer {
      text-align: center;
  }
  .aoarticlescontainer img {
      margin: auto;
      float: none;
      display: block;
  }
}

.aoarticlescontainer a:hover {
  background-color: #e4e4ef;
  font-size: 18px;
}


}

.flip-card {
  background-color: transparent;
  width: 760px;
  height: 400px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #e4e4ef;
  color: black;
}

.flip-card-back {
  background-color: #fafafc;
  color: #222453;
  transform: rotateY(180deg);
}

.aoflipimagewithtext

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

.flip-box {
  background-color: transparent;
  width: 100%;
  height: 100%;
  border: 0px solid #f1f1f1;
  perspective: 1000px;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
  color: black;
}

.flip-box-back {
  background-color: #e4e4ef;
  color: white;
  transform: rotateY(180deg);
  border: 2px solid #222453
  
}