/* ==== BROWSER RESETS  ==== */
* { padding: 0; margin: 0; border: 0; box-sizing: border-box; font-weight: normal; font-size: 16px }
body, html { height: 100% } 
body { max-width: 1600px; margin: 0 auto }
img { display: block; width: 100%; height: auto }


/* ==== BODY ==== */
body { background-color: #f1efe9 }



/* ==== PAGE WRAPPER  ==== */
.page-wrapper { 
    margin-left: auto;
    margin-right: auto;
 }
 
 /* Mobiles */
 @media all and (max-width:767px) {
    .page-wrapper { width: 80%; margin-bottom: 10% }
 }
 
 /* Desktop */
 @media all and (min-width:768px) {
    .page-wrapper { width: 60%; margin-bottom: 5% }
 }


 /* ==== MAIN HEADING  ==== */
h1 {
    width: 90%;
    font-family: serif;
    font-weight: normal;
    text-align: center;
    font-size: calc(34px + (58 - 34) * ((100vw - 320px)/(1600 - 320)));
    letter-spacing: -1px;
 }

 /* Mobiles */
@media all and (max-width:767px) {
    h1 { 
       line-height: 1.1;
       margin-top: 10%;
       margin-bottom: 10%;
       margin-left: auto;
       margin: 10% auto;
    }
 }
 
 /* Desktop */
 @media all and (min-width:768px) {
    h1 { 
       line-height: 1.2;
       margin-top: 5%;
       margin-right: auto;
       margin-bottom: 5%;
       margin-left: auto;
       margin: 5% auto;
    }
 }

 /* ==== SUB HEADINGS ==== */
 h2, h3, h4 { font-family: sans-serif; font-weight: bold; line-height: 1.2 }
 h2 { letter-spacing: 1px; text-transform: uppercase }

 h2 { 
   font-size: calc(18px + (26 - 18) * ((100vw - 320px)/(1600 - 320)));
 }

 h3 { 
   font-size: calc(17px + (20 - 17) * ((100vw - 320px)/(1600 - 320)));
 }

 h4 { 
   font-size: calc(16px + (18 - 16) * ((100vw - 320px)/(1600 - 320)));
 }

 /* Mobiles */
 @media all and (max-width:767px) {
    h2 { margin-top: 12% }
    h3 { margin-top: 10% }
    h4 { margin-top: 8% }
}

/* Desktop */
@media all and (min-width:768px) {
    h2 { margin-top: 6% }
    h3 { margin-top: 4% }
    h4 { margin-top: 2% }
}

/* ==== PARAGRAPH TEXT ==== */
p { 
    font-family: sans-serif;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320)));
  }
 
  /* Mobiles */
  @media all and (max-width:767px) {
     p { line-height: 1.4; margin-bottom: 5% }
  }
 
  /* Desktop */
  @media all and (min-width:768px) {
     p { line-height: 1.6; margin-bottom: 3% }
  }

  /* ==== BULLETS ==== */

ul li, ol li {
    font-family: sans-serif;
    font-weight: normal;
    font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320)));
}

/* Mobiles */
@media all and (max-width:767px) {
    ul, ol { margin-left: 5% }
    ul li, ol li {
       line-height: 1.4;
       margin-bottom: 3%;
    }
}
 
/* Desktop */
@media all and (min-width:768px) {
    ul, ol { margin-left: 2% }
    ul li, ol li {
       line-height: 1.6;
       margin-bottom: 2%;
    }
}

/* ==== IMAGES ==== */

 /* Mobiles */
 @media all and (max-width:767px) {
    img { margin-bottom: 6% }
 }

 /* Desktop */
 @media all and (min-width:768px) {
    img { margin-bottom: 2% }
 }

 /* ==== DIV - INTRODUCTION ==== */
 .box-introduction { 
    width: 90%;
    border-bottom-style: solid;
    border-bottom-color: #dcd8cf;
    border-bottom-width: 12px
 }

 .box-introduction p { 
    font-size: calc(20px + (30 - 20) * ((100vw - 320px)/(1600 - 320)));
    line-height: 1.4; 
    font-family: serif; 
    font-style: italic; 
    text-align: center
 }

 /* Mobiles */
 @media all and (max-width:767px) {
    .box-introduction { 
        margin: 2% auto 16% auto;
        padding-bottom: 10px;
   }
}

/* Desktop */
@media all and (min-width:768px) {
   .box-introduction { 
       margin: 2% auto 6% auto;
       padding-bottom: 2%;
   }
}

/* ==== DIV - HIGHLIGHTED BLOCK ==== */
.box-highlight { 
    background-color: #d4c6e6;
    margin: 5% 0;
    padding: 14px 20px;
 }

 .box-highlight h4 { margin-top: 0 }
 .box-highlight p:last-child { margin-bottom: 0 }
 .box-highlight ul { margin-bottom: 0 }
 .box-highlight ul li:last-child { margin-bottom: 0 }

 /* == Begin footer CSS == */

/* Outer footer parent container */
.container-footer { 
	display: flex;
	justify-content: space-between;
   flex-wrap: wrap;
   background-color:#2c3e50
}

/* Desktop footer - inside padding  */
@media all and (min-width:768px) {
	.container-footer { padding: 3% 8% 3% 8% }
}

/* Mobiles footer - inside padding */
@media all and (max-width:767px) {
	.container-footer { padding: 12% 8% 1% 8% }
}

/* Inner footer columns */

/* Desktops - 3 columns */
@media all and (min-width:768px) { 
   .container-footer .item-3:nth-child(1) { width: 20% }
   .container-footer .item-3:nth-child(2) { 
      width: 50%;
      /* text-align: center */
   }
   .container-footer .item-3:nth-child(3) { 
      width: 20%;
   }
}

/* Mobiles - 1 column */
@media all and (max-width:767px) { 
	.container-footer .item-3 { 
      width: 100%;
      margin-bottom: 10%
   }
   .container-footer .item-3:nth-child(2) { order: 1 }
   .container-footer .item-3:nth-child(1) { order: 2 }
   .container-footer .item-3:nth-child(3) { order: 3 } 
}

/* Styles for footer background, text, icons and links */

.container-footer .item-3 h4,
.container-footer .item-3 p,
.container-footer .item-3 p i,
.container-footer .item-3 p a {
   color: #fff
}

.container-footer .item-3 h4 {
   font-weight: bold;
   /* text-transform: uppercase */
   margin-bottom: 12px;
   font-size: calc(17px + (19 - 17) * ((100vw - 320px)/(1600 - 320)));
}

.container-footer .item-3 p {
   font-weight: normal;
   margin-bottom: 12px;
   font-size: calc(15px + (18 - 15) * ((100vw - 320px)/(1600 - 320)));
   line-height: 1.6
}

.container-footer .item-3 i { 
   padding-right: 26px;
} 

.container-footer .item-3 p a {
   text-decoration: none;
   border-bottom-style: solid;
   border-bottom-width: 2px;
   padding-bottom:2px;
}

.container-footer .item-3 p a:link, 
.container-footer .item-3 p a:visited  {
   border-bottom-color: transparent;
}

.container-footer .item-3 p a:hover, 
.container-footer .item-3 p a:active  {
   border-bottom-color: #fff
}

/* == End footer CSS == */