/* ==== BROWSER RESETS  ==== */
* { box-sizing: border-box; padding: 0; margin: 0 }
body, html { height: 100% }
body { max-width: 1600px }


/* ==== UTILITY CLASS  ==== */
.img-fluid { width: 100%; height: auto }


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


/* ==== PAGE WRAPPER  ==== */
.page-wrapper { margin-bottom: 10% }

/* Desktop */
@media all and (min-width:768px) {
	.page-wrapper { 
		width: 60%; 
		margin-left: auto;
		margin-right: auto
	}
}

/* Mobiles */
@media all and (max-width:767px) {
  .page-wrapper { 
		width: 80%; 
		margin-left: auto;
		margin-right: auto
	}
}

/* ==== MAIN HEADING  ==== */

h1 { 
	font-family: serif;
	font-weight: normal;
	text-align: center;
	letter-spacing: -1px
}

/* Desktop */
@media all and (min-width: 768px) {
	h1 { 
		font-size: 54px;
		line-height: 1.2;
		width: 90%;
		margin-top: 5%;
		margin-bottom: 5%;
		margin-left: 5%;
		margin-right: 5%
  }
}

 /* Mobiles */
@media all and (max-width:767px) {
	h1 { 
		font-size: 36px;
		line-height: 1.1;
		width: 90%;
		margin-top: 10%;
		margin-bottom: 10%;
		margin-left: 5%;
		margin-right: 5%
	}
}

/* ==== SUB HEADINGS ==== */

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


/* Desktop */
@media all and (min-width:768px) {
	h2 { font-size: 22px; margin-top: 5% }
	h3 { font-size: 20px; margin-top: 3% }
	h4 { font-size: 18px; margin-top: 1.5% }
}

/* Mobiles */
@media all and (max-width:767px) {
	h2 { font-size: 18px; margin-top: 10% }
	h3 { font-size: 16px; margin-top: 1% }
	h4 { font-size: 15px; margin-top: 1% }
}

 /* ==== PARAGRAPH TEXT ==== */

p { font-family: sans-serif }

/* Desktop */
@media all and (min-width:768px) {
	p { font-size: 18px; line-height: 1.6; margin-bottom: 2.5% }
}

/* Mobiles */
@media all and (max-width:767px) {
	p { font-size: 15px; line-height: 1.4; margin-bottom: 5% }
}


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

li { font-family: sans-serif; margin-left: 17px }

/* Desktop */
@media all and (min-width:768px) {
	ul { margin-bottom: 2.5% }
	li { 
		font-size: 18px; line-height: 1.7; 
		margin-bottom: 1%
	}
}

 /* Mobiles */
 @media all and (max-width:767px) {
	ul { margin-bottom: 5% }
	li {
		font-size: 15px; line-height: 1.4;
		margin-bottom: 4%
	}
}


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

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


/* ==== DIV - INTRODUCTION ==== */

.box-introduction { 
	width: 90%;
	border-bottom-style: solid; 
	border-bottom-color: #dcd8cf;
	width: 90%;
}

.box-introduction p { font-family: serif; font-style: italic; text-align: center }

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

	.box-introduction p { 
		line-height: 1.4; 
		font-size: 28px; 
	}
}

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

	.box-introduction p { 
		line-height: 1.3; 
		font-size: 20px; 
	}
}


/* ==== DIV - HIGHLIGHTED BLOCK ==== */

.box-highlight { background-color: #d4c6e6 }
.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 }

/* Desktop */
@media all and (min-width:768px) { 
	.box-highlight { margin-top: 4%; margin-bottom: 6% }
	.box-highlight { padding: 12px 20px }
}

/* Mobiles */
@media all and (max-width:767px) { 
	.box-highlight { margin-top:2%; margin-bottom: 10% }
	.box-highlight { padding: 12px 14px }
}