.main {
  width: 98%;
  background-color: #BCDAFF;
  font-family: 'Kalam-Regular', sans-serif;
  line-height: 1.5;
  font-size: 12pt;
  font-weight: 700;
  color: #004444;
}

/* Styles for heading 1 */
h1 {
  font-size: 36pt;
  color: #53006c;
  text-align: center;
  font-family: 'Petit-Formal', cursive;
}  
  
/* Styles for heading 2 */
h2 {
  font-size: 18pt;
  color: #53006c;
  padding-top: 2px;
  margin-bottom: 4px;
}  

h3 {
  font-size: 14pt;
  color: #5C8FB5;
  padding-top: 2px;
  padding-left: 1em;
  margin-bottom: 4px;
}  
  
/* General paragraph styles */
p {
  padding-left: 2em;
  padding-right: 15px;
}    
  
/* Body styles */
body {
  background-color: #BCDAFF;
  font-family: arial;
  font-size: 9pt;
}  

/* Table cell styles */
td {
  padding-left: 10px;
  padding-right: 10px;
  font-family: arial;
  font-size: 11pt;
}

strong {
  font-weight: bold;
  text-decoration: underline;
  font-size: 1.2em;
  color: #007777;
}

@media screen and (min-width: 769px) and (max-width: 1280px) {
  .main {
    font-size: 28px; 
  }

  h1 {
    font-size: 40pt;
  }

  h2 {
    font-size: 32pt;
  }

  h3 {
    font-size: 28pt;
  }   
}

/* Ensure base link style */
a.area_pages {
  text-decoration: underline;
}

/* Strip underline from the active indicator arrow positioned before text */
a.area_pages span.active-arrow {
  display: inline-block;
  text-decoration: none !important;
  margin-right: 0.4em;
  font-family: initial;
}

/* ==========================================
   IMAGE & WRAPPER CLEARING FIX
   ========================================== */

/* Automatically float images inside sections */
div img,  
article img,  
main img {
  float: left;
  margin: 0 15px 15px 0;
  height: auto;
}

/* Explicit class overrides for intentional left/right alignment */
.content-img {
  margin-bottom: 15px;
}

.content-img.right, img.right {
  float: right;
  margin: 0 0 15px 15px;
}

.content-img.left, img.left {
  float: left;
  margin: 0 15px 15px 0;
}

/* Forces each section wrapper <div> to expand and clear the floated 
   image, ensuring the next block starts below the bottom of the image */
div {
  display: flow-root;
}