@font-face {
  font-family: Clarendon;
  src: url("../fonts/clar45w.ttf");
}

<!-- BELOW ARE STYLES FOR MOBILE DEVICES -->
@media (max-width: 767px) {

.heading {
      font-family: Clarendon;
	  color: #ffffff;
	  font-size: 22px;
}
  
  
.maintext {
	font-family: Clarendon, Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-size: 18px;
}
.maintext a:link {
	color: #ffffff;
	text-decoration: none;
}
.maintext a:visited {
	text-decoration: none;
	color: #ffffff;
}
.maintext a:hover {
	text-decoration: none;
	color: #11912c;
}
.maintext a:active {
	text-decoration: none;
	color: #ffffff;
}

}


<!-- BELOW ARE STYLES FOR TABLETS -->
@media (min-width: 768px) and (max-width: 1024px) {

.heading {
      font-family: Clarendon;
	  color: #ffffff;
	  font-size: 20px;
}
  
  
.maintext {
	font-family: Clarendon, Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-size: 16px;
}
.maintext a:link {
	color: #ffffff;
	text-decoration: none;
}
.maintext a:visited {
	text-decoration: none;
	color: #ffffff;
}
.maintext a:hover {
	text-decoration: none;
	color: #11912c;
}
.maintext a:active {
	text-decoration: none;
	color: #ffffff;
}

}


<!-- BELOW ARE STYLES FOR DESKTOPS -->
@media (min-width: 1025px) {

.heading {
      font-family: Clarendon;
	  color: #ffffff;
	  font-size: 20px;
}
  
  
.maintext {
	font-family: Clarendon, Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-size: 16px;
}
.maintext a:link {
	color: #ffffff;
	text-decoration: none;
}
.maintext a:visited {
	text-decoration: none;
	color: #ffffff;
}
.maintext a:hover {
	text-decoration: none;
	color: #11912c;
}
.maintext a:active {
	text-decoration: none;
	color: #ffffff;
}

}