a.iconPost time:before,
.bottomLinks a:before,
#upcomingEventsCont a.iconPost span:before {
    content: "\f111";
    font-family: 'Font Awesome 5 Pro';
    font-style: normal;
    font-variant: normal;
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

a.iconPost h4 {
    font-family: 'Roboto', sans-serif;
    font-size: 1.3rem;
    font-weight: 400;
    font-style: normal;
    color: inherit;
    margin-bottom: 0;
    /*white-space: nowrap;*/
    text-transform:capitalize;
	display: block;
	/*height: 42px;*/
	line-height: 1;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

.main-bg{
	position: absolute;
	top:auto;
	bottom: auto;
	left: 0;
	right:0;
	width: 100%;
	height: 2rem;
	display: block;	
	background: -moz-linear-gradient(to top, rgba(255,255,255,0.95) 40%,rgba(277,277,277,0) 100%);
	background: -webkit-linear-gradient(to top, rgba(255,255,255,0.95) 40%,rgba(277,277,277,0) 100%);
	background: linear-gradient(to top, rgba(255,255,255,0.95) 40%,rgba(277,277,277,0) 100%);
	z-index:1;
}
main {
    padding: 0 0 2rem 0;
    background: rgb(227,227,227) url(../images/compass.png) right bottom no-repeat;
    background-position: 87rem 17rem;
    background-size: 42rem 34rem;
}
main .col-sm {
     padding: 0 0.5rem 3rem;
    min-width: 50%;   
}
/*#recentEventsCont {
    padding: 0 0.5rem 3rem 0;
}
#upcomingEventsCont {
    padding: 0 0 3rem 0.5rem;
}*/
header.masterHeader {
    position: absolute !important;
    width: 100%;
}

/*.frmSearch {
    position: absolute;
    top: 39%;
    top: 300px;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    margin: 0;
    z-index: 5;
}*/
main .container h3 {
    font-family: 'Century Gothic regular';
    font-size: 1.563rem;
    font-weight: normal;
    font-style: normal;
    /*padding-bottom: 1rem;*/
    text-transform: uppercase;
    /*border-bottom: 1px solid rgb(222,219,218);*/
    color: #112330;
}

main .container h3 span {  
    font-family: 'Roboto', sans-serif;
    font-size: 3.125rem;
    display: block;
    font-weight:700;
    font-style:normal;
    letter-spacing: 3px;
}

#recentEventsCont .borderTitle {
    border-top: 20px solid #009788;
    width: 17%;
    margin-bottom: 1rem;
}
#upcomingEventsCont .borderTitle {
    border-top: 20px solid #0299cc;
    width:17%;
    margin-bottom: 1rem;
}
#upcomingEventsCont .EventDetails {
    background: rgb(255,255,255);
    padding: 1rem 2rem;
    -webkit-border-radius: 0.5rem;
    -moz-border-radius: 0.5rem;
	border-radius: 0.5rem;
}
main .container #recentEventsCont h3 span {
    color: #009788;
}
main .container #upcomingEventsCont h3 span {  
    color: #0299cc;   
}
#recentEventsCont a.iconPost,
#recentEventsCont a.iconPost:link {
    position: relative;
    display: block;
    float: right;
    color: #112330;
    padding: 0 8px 0 85px;
    width: 50%;
	margin: 1rem 0;
}

#recentEventsCont a.iconPost:first-of-type,
#recentEventsCont a.iconPost:nth-of-type(2) {
	margin: 0 0 1rem;
}

#recentEventsCont a.iconPost:visited {
    color: #112330;
}
#recentEventsCont a.iconPost:hover {
    color: #009788;
}
#recentEventsCont a.iconPost:active {
    color: #009788;
}
#recentEventsCont a.iconPost:focus {
    color: #009788;
}
#recentEventsCont a.iconPost:first-of-type,
#recentEventsCont a.iconPost:link:first-of-type {
    height: 24rem;
    float: left;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 1.5rem;
}

#recentEventsCont a.iconPost h4 {
	font-size: 1.1rem;
	line-height: 1.4rem;
}


#recentEventsCont a.iconPost:first-of-type h4 {
	font-size: 1.3rem;
	line-height: 1.4rem;
}

/*#recentEventsCont a.iconPost::before{
    content:"";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    padding: 0;
    background: rgba(0,0,0,0.5);
    -webkit-transition: background 300ms ease 0s;
    -moz-transition: background 300ms ease 0s;
    -o-transition: background 300ms ease 0s;
    transition: background 300ms ease 0s;
    z-index: 1;
}*/
#recentEventsCont a.iconPost img{
    /*height:100%;
    width:100%;*/  
    display: none;
}
#recentEventsCont a.iconPost:first-of-type img {
    display: inherit;
    margin-bottom: 1rem;
}

#recentEventsCont .noticeTitle{
    /*position:absolute;   
    left:auto;
    right:auto;
    bottom:17px;
    padding:1rem;
    width:96%;
    background: -moz-linear-gradient(to top, rgba(43,70,102,0.85) 40%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(to top, rgba(43,70,102,0.85) 40%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to top, rgba(43,70,102,0.85) 60%,rgba(0,0,0,0) 100%);*/
}
#recentEventsCont a.iconPost i {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(0,151,136,0.7);
    transform: none;
    padding: 1rem;
    font-size: 1.875rem;
    color: rgb(255,255,255);
	width: 4rem;
    height: 4rem;
    text-align: center;
}
#upcomingEventsCont a.iconPost,
#upcomingEventsCont a.iconPost:link {
    position: relative;
    color: #112330;
    display: block;
    padding: 1.4rem 1rem 1.4rem 5rem;
    border-bottom: 1px solid #cfd3d6;
}
#upcomingEventsCont a.iconPost:last-of-type{
    border-bottom:none;
}
#upcomingEventsCont a.iconPost:visited {
    color: #112330;
}
#upcomingEventsCont a.iconPost:hover {
    color: #0299cc;
}
#upcomingEventsCont a.iconPost:active {
    color: #0299cc;
}
#upcomingEventsCont a.iconPost:focus {
    color: #0299cc;
}



a.iconPost time {
    font-family: 'Roboto';
    font-size: 0.9rem;
    font-weight: normal;
    font-style: normal;
    color: inherit;
    text-transform: uppercase;
}
a.iconPost time:before {
    content:"\f017";
    font-weight: 700;
    margin-right: 0.5rem;  
	display: none;
}
#recentEventsCont a.iconPost time:before {
    color: #009788;
}
#upcomingEventsCont a.iconPost time:before {
    color: #0299cc;
}
a.iconPost time span {
    display: inline-block;
    margin-right: 0.5rem;
}

#upcomingEventsCont a.iconPost i {
    position: absolute;
    top: 50%;
    left: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 3.125rem;
    color: #0299cc;
}
#upcomingEventsCont a.iconPost span {
    font-family: 'Roboto', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    font-style: normal;
    position:relative;
    float:right;
    top:-4rem;
    text-transform:uppercase;
}
#upcomingEventsCont a.iconPost span:before{
    content: "\f2f5";
    color: #0299cc; 
    display:block;
    text-align:center;
    font-weight:700;
    font-size:1.563rem;
}
#recentEventsCont .bottomLinks a:first-of-type:before {
    content: "\f055";
    color: #009788;
}
#recentEventsCont .bottomLinks a:last-of-type:before {
    content: "\f00a";   
    color: #009788;
}
#upcomingEventsCont .bottomLinks a:first-of-type:before {
    content: "\f271";   
    color: #0299cc;
}
#upcomingEventsCont .bottomLinks a:last-of-type:before {
    content: "\f073";    
    color: #0299cc;
}

#upcomingEventsCont a.iconPost h4 {
	height: 42px;
}

.empty i {
    font-size: 5rem;
    color: rgb(222,219,218);
    margin: 1rem 0;
}
.empty p a,
.empty p a:link {
    font-weight: 700;
}

.empty a,
.empty a:link/*,
.bottomLinks a,
.bottomLinks a:link*/ {
    color: rgb(22,87,81);
    display: inline-block;
}
.empty a:visited/*,
.bottomLinks a:visited*/{
    color: rgb(22,87,81);
}
.empty a:hover/*,
.bottomLinks a:hover*/{
    color: rgb(227,83,13);
}
.empty a:active/*,
.bottomLinks a:active*/ {
    color: rgb(227,83,13);
}
.empty a:focus/*,
.bottomLinks a:focus*/ {
    color: rgb(227,83,13);
}

.bottomLinks {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 1rem;
    margin-bottom: 0;
}

.bottomLinks a,
.bottomLinks a:link {
    float: left;
    font-family: 'Roboto', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
    color:#112330;
}
.bottomLinks a:hover{
    color:#0299cc;
}
.bottomLinks a:last-of-type{
    float: right;
}

.bottomLinks a:before {
    font-weight: 700;   
    margin-right: 0.5rem;
}
.footerInfo {
    background: #15416c;
    padding: 1.5rem 0 4.5rem !important;
}
/****************************************************************
--------Highlights---------
****************************************************************/


ul.homeCol3,
ul.homeCol3 > li {
    list-style: none;
    margin: 0;
}

ul.homeCol3 {
    margin:0;
    padding:0;
}

.post {
    position: relative;
    /*left: 7%;*/
    width:100%
}

main .post {
    margin: 2.5em 0;
}
ul.homeCol3 > li {
    position: relative;
    float: left;
    height: auto;
    min-height: 12em;
    margin-right:1em;
    width: 32.4%;
}
ul.homeCol3 > li:last-child{
    margin-right: 0;
}
ul.homeCol3 > li a{
   display:block;
}
main .post h2 {
    font: normal 700 1.375em 'Roboto Slab', serif;
    text-transform: uppercase;
    margin: 1em 0 0;
    letter-spacing: 2px;
}
 .post p {
    font: normal 700 1.063em 'Lato', sans-serif;
    color: rgb(0,35,65);
}
 .post .post-1 h2{
    color:rgb(35,156,123);
}
 .post .post-2 h2 {
    color: rgb(0,73,134);
}
 .post .post-3 h2{
    color: rgb(0,148,218);
    
}
 .post .post-1 figure {
    background: rgb(35,156,123);
    max-width: 416px;
}
 .post .post-1 img {
    /* opacity: 1; */
    /* -webkit-transition: .3s ease-in-out; */
    /* transition: .3s ease-in-out; */
}
 .post .post-2 figure {
    background: rgb(0,73,134);
    max-width: 416px;
}
 .post .post-2 img {    
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
 .post .post-3 figure {
    background: rgb(0,148,218);
    max-width: 416px;
}
 .post .post-3 img {    
    opacity: 1;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
 .post .post-1:hover img {
    opacity: 0.3;
}
 .post .post-2:hover img {
    opacity: 0.3;
}
 .post .post-3:hover img {
    opacity: 0.3;
}


/****************************************************************
--------End---------
****************************************************************/

/****************************************************************
MEDIA QUERY
****************************************************************/
@media only screen and (max-width: 1680px) {
    main {
        background-position: 81rem 21rem;
        background-size: 40rem 30rem;
    }
    .empty i {
        font-size: 4rem;
    }
    a.iconPost, 
    a.iconPost:link,
    .bottomLinks a, 
    .bottomLinks a:link,
    /*a.iconPost time,*/
    .empty p {
        font-size: 1rem;
    }
    a.iconPost, 
    a.iconPost:link {
        padding-left: 2.5rem;
    }
    a.iconPost i {
        font-size: 1.5rem;
    }
}
@media only screen and (max-width:1590px){
    main {
        background-position: 75rem 17rem;
    }
    /*.maingradient{
        bottom:-56.5rem;
    }*/
    main .container h3 {
        font-size: 1.3rem;
    }
    main .container h3 span {
        font-size: 2.7rem;        
    }
    a.iconPost time {
        font-size: 0.8rem;
    }
    a.iconPost h4 {
        font-size: 1.1rem;
		height: 35px;
    }
    #recentEventsCont a.iconPost,
    #recentEventsCont a.iconPost:link {
        padding: 0 8px 18px 85px;
    }
    /*#recentEventsCont a.iconPost img {            
        min-height: 240px;       
    }*/
    #recentEventsCont a.iconPost i {
        font-size: 1.8rem;
    }
    #upcomingEventsCont a.iconPost, #upcomingEventsCont a.iconPost:link {       
        padding: 1.5rem 1rem 1.5rem 5rem;       
    }
    #upcomingEventsCont a.iconPost i{
        font-size:2.7rem;
    }    
    #upcomingEventsCont a.iconPost span {       
        font-size: 1rem;       
        top: -3.5rem;       
    }
    #recentEventsCont .noticeTitle {       
        bottom: 10px;       
    }
}
@media only screen and (max-width:1550px){
    #upcomingEventsCont a.iconPost, #upcomingEventsCont a.iconPost:link {
        padding: 1.45rem 1rem 1.45rem 5rem;
    }
    /*.maingradient {
        bottom: -56rem;
    }*/
}
@media only screen and (max-width:1450px){
    main {
        background-position: 66rem 17rem;
    }
}
@media only screen and (max-width:1330px) {
    .activePopupAlert .frmSearch {
        top: 22rem;
    }
    main {
        background-position: 61.5rem 21rem;
        background-size: 31rem 25rem;
    }
}

@media only screen and (max-width:1300px) {
    a.iconPost time {
        display: block;
        line-height: 1.5;
    }
    a.iconPost time span {
        display: block;
        margin-right: 0;
    }
}

@media only screen and (max-width:1190px) {
    main {
        background-position: 54rem 17rem;
        background-size: 28rem 25rem;
    }
    /*.maingradient {
        bottom: -52rem;
    }*/
    .activePopupAlert .frmSearch {
        top: 20rem;
    }
    main .container h3 {
        font-size: 1.1rem;
    }
    main .container h3 span {
        font-size: 2.4rem;
    }
    /*#recentEventsCont a.iconPost img {
        min-height: 214px;
    }*/
    #recentEventsCont .noticeTitle {
        width: 94%;
    }
    #upcomingEventsCont a.iconPost, #upcomingEventsCont a.iconPost:link {
        padding: 1.25rem 1rem 1.25rem 4.5rem;
    }   
    #upcomingEventsCont a.iconPost span {
        font-size: 0.9rem;       
    }
    #upcomingEventsCont a.iconPost i {
        font-size: 2.5rem;
    }
    a.iconPost time {
        font-size: 0.65rem;
    }
    a.iconPost h4 {
        font-size: 0.87rem;
		    height: 26px;
    }
	@-moz-document url-prefix() { 
		a.iconPost h4 {
			height: 30px;
		}
	}
    
}
@media only screen and (max-width:1080px){
    main {
        background-position: 47rem 16rem;       
    }
}
/*@media only screen and (max-width:1024px) {
    main .container h3 {
        font-size: 1.2rem;
    }
}*/

@media only screen and (max-width:1023px) {
    /*.maingradient {
        bottom: -50.9rem;
    }*/
    #upcomingEventsCont a.iconPost, #upcomingEventsCont a.iconPost:link {
        padding: 1.1rem 1rem 1.1rem 4.5rem;
    }
    /*#recentEventsCont a.iconPost img {
        min-height: 202px;
    }*/
}
@media only screen and (max-width:991px) {
    main {
        background-position: 44rem 70rem;
        background-size: 24rem 20rem;
    }
    /*.maingradient {
        bottom: 0;
        background:none;
    }*/
    .container {
        max-width: 100%;
    }
    main .col-sm {
        flex-basis: auto;
    }
   
    main .col-sm {
        padding: 0 0 2rem;
    }
    #recentEventsCont{
        margin-bottom:2rem;
    }
    /*.bottomLinks {
        position: static;
        bottom: auto;
        left: auto;
        right: auto;
        padding-left: 0;
        padding-right: 0;
        margin-top: 2rem;
    }*/
    .empty i {
        font-size: 3rem;
    }
    a.iconPost, 
    a.iconPost:link, 
    .bottomLinks a, 
    .bottomLinks a:link, 
    /*a.iconPost time,*/ 
    .empty p {
        font-size: 0.85rem;
    }
    a.iconPost i {
        font-size: 1.1rem;
    }
    a.iconPost h4 {
        font-size: 1.1rem;
		height: 35px;
    }	

    a.iconPost time {
        font-size: 0.9rem;
    }
    #recentEventsCont .noticeTitle {
        width: 97%;
    }
    main .container h3 {
        font-size: 1rem;
    }
    main .container h3 span {
        font-size: 2.2rem;
    }
}
@media only screen and (max-width:890px){
    main {
        background-position: 38rem 65rem;       
    }
}
@media only screen and (max-width:785px) {
    main {
        background-position: 31rem 62rem;
    }
    header.masterHeader {
        position: static !important;
    }    
    .activePopupAlert .frmSearch {
        top: 240px;
    }
    
    #recentEventsCont .noticeTitle {
        width: 96%;
    }
}

@media only screen and (max-width:680px) {
    main {
        background-position: 25rem 55rem;
    }
    
    main .container h3 span {
        font-size: 2rem;
    }
    #recentEventsCont .noticeTitle {
        width: 95%;
    }
    a.iconPost h4 {
        font-size: 1rem;
		    height: 29px;
    }
	@-moz-document url-prefix() { 
		a.iconPost h4 {
			height: 35px;
		}
	}
    a.iconPost time {
        font-size: 0.8rem;
    }
    #upcomingEventsCont a.iconPost i {
        font-size: 2.2rem;
    }
    #upcomingEventsCont a.iconPost span::before {        
        font-size: 1.3rem;
    }
    #upcomingEventsCont a.iconPost span {
        font-size: 0.8rem;
        top: -3rem;
    }
    #upcomingEventsCont .EventDetails {       
        padding: 1rem 1rem;       
    }
}


@media only screen and (max-width:610px){
    main {
        background-position: 20rem 55rem;
    }
    a.iconPost time {
        font-size: 0.65rem;
    }
    a.iconPost h4 {
        font-size: 0.89rem;
    }
		@-moz-document url-prefix() { 
		a.iconPost h4 {
			height: 30px;
		}
	}
    #recentEventsCont a.iconPost i {
        font-size: 1.5rem;
    }
}


@media only screen and (max-width:580px) {
    
    .activePopupAlert .frmSearch {
        top: 230px;
    }
}

@media only screen and (max-width:500px) {
    main {
        background-position: 19rem 111rem;
        background-size: 17rem 17rem;
    }
    main .container {
        padding:0;
    }
    main .container .recenteventDetails,
    main .container .upcomingeventDetails {
        padding: 0 1rem;
    }

    #recentEventsCont a.iconPost, 
    #recentEventsCont a.iconPost:link,
    #recentEventsCont a.iconPost:first-of-type,
    #recentEventsCont a.iconPost:link:first-of-type {
        float: none;
    }
    #recentEventsCont a.iconPost:first-of-type, 
    #recentEventsCont a.iconPost:link:first-of-type {
        height: auto;
        padding: 0;
    }
    #recentEventsCont .borderTitle,
    #upcomingEventsCont .borderTitle {
        width: 100%;
    }
    #recentEventsCont a.iconPost,
    #recentEventsCont a.iconPost:link {
        width: 100%;
        padding: 4px 0 6px 70px;
    }
    #recentEventsCont .noticeTitle {
        width: 100%;
        bottom: 16px;
        padding: 0;
    }
    #upcomingEventsCont a.iconPost, #upcomingEventsCont a.iconPost:link {
        padding: 1.25rem 1rem 1.25rem 3.5rem;
    }
    #upcomingEventsCont a.iconPost i {
        font-size: 2rem;
    }
    main .container h3 span {
        font-size: 1.7rem;
    }
}
@media only screen and (max-width:460px){
    main {
        background-position: 17rem 105rem;
        background-size: 25rem 17rem;
    }
}
@media only screen and (max-width:430px){
    main {
        background-position: 15rem 100rem;        
    }
}
@media only screen and (max-width:400px) {
    main {
        background-position: 15rem 98rem;
        background-size: 22rem 17rem;
    }
    main .col-sm {
        padding: 0 0 5rem;
    }
    .bottomLinks a, 
    .bottomLinks a:link {
        float: none;
        /*max-width: 200px;*/
        font-size: 0.7rem;
        color: rgb(255,255,255);
        text-align: center;
        display: block;
        padding: 0.6rem 1.5rem;
        margin: auto;
        /*-webkit-border-radius: 0.5rem;
        -moz-border-radius: 0.5rem;
        border-radius: 0.5rem;*/
        -webkit-transition-property: background;
        -moz-transition-property: background;
        -o-transition-property: background;
        transition-property: background;        
    }
    .bottomLinks a:visited {
        color: rgb(255,255,255);
    }
    .bottomLinks a:hover {
        background: #0299cc;
    }
    .bottomLinks a:first-of-type {
        margin-bottom: 0.5rem;
    }
    .bottomLinks a:last-of-type {
        float: none;
    }
    .bottomLinks a:before {
        color: rgb(255,255,255)!important;
    }
    #upcomingEventsCont .bottomLinks a {
        background: #0299cc;
    }
    #upcomingEventsCont .bottomLinks a:hover {
        background: #0299cc;
    }
    #recentEventsCont .bottomLinks a {
        background: #0299cc;
    }
    #recentEventsCont .bottomLinks a:hover{
        background: #0299cc;
    }
    .frmSearch {
        top: 170px;
    }
    .activePopupAlert .frmSearch {
        top: 200px;
    }
    #upcomingEventsCont .EventDetails {
        padding: 0.5rem;
    }
    #upcomingEventsCont a.iconPost, #upcomingEventsCont a.iconPost:link {
        padding: 1rem 0.5rem 1rem 2.4rem;
    }
    #upcomingEventsCont a.iconPost span {
        font-size: 0.6rem;
        top: -2.5rem;
    }
    #upcomingEventsCont a.iconPost span::before {
        font-size: 1.1rem;
    }

    #upcomingEventsCont a.iconPost i {
        font-size: 1.5rem;
    }
    #upcomingEventsCont a.iconPost time::before {
        margin-right: 0.2rem;
    }
    #upcomingEventsCont a.iconPost time {
        font-size: 0.6rem;
    }

}
@media only screen and (max-width:360px){
    main {
        background-position: 11rem 93rem;
        background-size: 20rem 16rem;
    }
}