/* STANDARD ELEMENTS RESET */

*{margin:0px; padding:0px; border:0px;} table {border-collapse:collapse;} img {vertical-align:middle;}
input {box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; outline:none;} 
select {-webkit-appearance:none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; outline:none;}
textarea {-webkit-appearance:none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; outline:none;}
header:after {content:"."; display:block; height:0; clear:both; overflow:hidden;}  header {display:inline-block;}  * html header {height: 0px; overflow:hidden;}  header {display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} 
nav:after {content:"."; display:block; height:0; clear:both; overflow:hidden;}  nav {display:inline-block;}  * html nav {height: 0px; overflow:hidden;}  nav {display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} 
section:after {content:"."; display:block; height:0; clear:both; overflow:hidden;}  section {display:inline-block;}  * html section {height: 0px; overflow:hidden;}  section {display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} 
article:after {content:"."; display:block; height:0; clear:both; overflow:hidden;}  article {display:inline-block;}  * html article {height: 0px; overflow:hidden;}  article {display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} 
aside:after {content:"."; display:block; height:0; clear:both; overflow:hidden;}  aside {display:inline-block;}  * html aside {height: 0px; overflow:hidden;}  aside {display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} 
footer:after {content:"."; display:block; height:0; clear:both; overflow:hidden;}  footer {display:inline-block;}  * html footer {height: 0px; overflow:hidden;}  footer {display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} 
/*div:after {content:"."; display:block; height:0; clear:both; overflow:hidden;}  div {display:inline-block;}  * html div {height: 0px; overflow:hidden;}  div {display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;} 
img {max-width:100%;}*/

.containerLatest {
	overflow: hidden !important;
	clear: both !important;
	margin-bottom: 80px;
}

section#BlogArticleMainTop {float:left; width:100%; padding:30px 0px 0px 0px; margin-bottom:30px;}
      #TopImage {float:left; width:33.3%;}
          #TopImageCaption {width:100%; text-align:center;}
      #TopText {float:right; width:63.6%;}

section#BlogArticleMainBottom {float:left; width:100%; padding:30px; margin-bottom:30px; margin-top:30px;}
      #BottomImage {float:right; width:33.3%;}
          #BottomImageCaption {width:100%; text-align:center;}
      #BottomText {float:left; width:63.6%;}

      .FullText {float:left; width:100%;}

/* FEATURE BLOG */

section#BlogFeature {float:left; clear:both; width:100%; margin:0 0 0 0; }
section#BlogFeature article {width:98%; background-color:var(--secondary-colour); margin:0 1% 30px 1%; float:left; display: flex; align-items: center; border-radius: 10px;}
section#BlogFeature article .Text  {float:left; width:60%; overflow:hidden; padding:55px;}
section#BlogFeature article .Text h2 {color:var(--primary-colour);}
section#BlogFeature article .Text p {color:var(--primary-colour); font-size: 16px; font-weight: 600; text-transform: uppercase;}

section#BlogFeature article .Image {
  width: 40%;
  padding-top: 40%;
  background-color: #222222;
  position: relative;
  background-position: center center;
  background-size: cover;
  border-radius: 10px 0px 0px 10px;
  float: left;
}


section#BlogFeature article .MoreBTN {
  display: inline-block;
  padding: 8px 30px;
  background: #023b59;
  color: #ebe70e;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: 1.2rem;
  box-shadow: 0 6px 0 #012a40, 0 10px 20px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  border: none;
  margin-top:10px;
}

section#BlogFeature article .MoreBTN:hover {
  background: #034a6e;
  transform: translateY(-2px);
  box-shadow:
    0 8px 0 #012a40,
    0 14px 24px rgba(0, 0, 0, 0.3);
}

section#BlogFeature article .MoreBTN:active {
  background: #023b59; 
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #012a40,
    0 6px 12px rgba(0, 0, 0, 0.25);
  padding: 8px 30px; 
}

.newsSection1 {padding: 90px 0px 75px 0px;background: var(--accent-colour);}

section#BlogPagination h1 {color:var(--primary-colour); margin-bottom: 25px;}

/* BLOG LISTINGS */

section#Blog {float:left; clear:both; width:100%; margin:0 0 0 0; }
section#Blog article {width:31.3%; background-color:#FFF; margin:0 1% 20px 1%; float:left; border-radius:10px; }
section#Blog.latestFeed article {width:31.3%; background-color:transparent; margin:0 1% 20px 1%; float:left; border-radius:10px; }
section#Blog article .Text  {float:left; background-color:var(--accent-colour); border-radius:0px 0px 10px 10px; width:100%; height:auto; overflow:hidden; padding:40px; min-height: 545px;}
section#BlogArticleTop h1 {color: var(--primary-colour); letter-spacing: 0.3px;}
section#Blog article .Text p {font-weight: 500; font-size: 18px; line-height: 30px;}
section#Blog article .Text p small {color:var(--primary-colour); font-weight: 900; font-size: 15px; text-transform: uppercase;}


section#Blog article .Image {
  width: 100%;     
  padding-top: 100%;  
  background-color: #222222;
  position: relative;
  background-position: center center;
  background-size: cover;
  border-radius: 10px 10px 0 0;
  float: left;
}

section#BlogPagination .NextBTN, section#BlogPagination .PrevBTN, section#Blog article .MoreBTN {
  display: inline-block;
  padding: 8px 30px;
  background: #023b59;
  color: #ebe70e;
  text-decoration: none;
  border-radius: 5px;
  font-weight: 800;
  letter-spacing: 0.3px;
  font-size: 1.2rem;
  box-shadow: 0 6px 0 #012a40, 0 10px 20px rgba(0, 0, 0, 0.25);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
  border: none;
  margin-top:10px;
}

section#BlogPagination .NextBTN:hover, section#BlogPagination .PrevBTN:hover, section#Blog article .MoreBTN:hover {
  background: #034a6e;
  transform: translateY(-2px);
  box-shadow:
    0 8px 0 #012a40,
    0 14px 24px rgba(0, 0, 0, 0.3);
}

section#BlogPagination .NextBTN:active, section#BlogPagination .PrevBTN:active, section#Blog article .MoreBTN:active {
  background: #023b59; 
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #012a40,
    0 6px 12px rgba(0, 0, 0, 0.25);
  padding: 8px 30px; 
}


.blogContent {width: 90%;margin: 0 auto;
}.latest { background: #F7F7F7; padding: 75px 0px;}
section#Blog.latestFeed article {background-color:transparent;}
section#Blog.latestFeed article .Text  {padding:0px; min-height: 545px;}
section#Blog.latestFeed article .Text p strong {font-weight: 700; font-size: 21px; line-height: 28px; color: #46217a;}
section#Blog.latestFeed article .Text p {font-weight: 300; font-size: 17px; line-height: 25px; color: #46217a;}


/* DROP DOWN FOR CATEGORIES */

.TextArea {float:left; width:98%; margin:0 1% 30px 1%;}
.DropSections {background-color:#eeeeee; color:#000000; float:left; padding:10px; font-size:0.90em; width:200px; margin-bottom:30px;}
        
       
/* PAGINATION */

section#BlogPagination {float:left; clear:both; width:98%; margin:100px 0 50px 0; }
section#BlogPagination .PaginationActive {float:left; border:1px solid var(--primary-colour); background-color:var(--secondary-colour); font-size:1em; color:var(--primary-colour); padding:5px 10px; margin-right:10px; }
section#BlogPagination .Pagination {float:left; border:1px solid var(--primary-colour); font-size:1em; color:var(--primary-colour); padding:5px 10px; margin-right:10px;}
section#BlogPagination .Pagination:hover {background-color:var(--secondary-colour); color:var(--primary-colour)}

section#BlogPagination .CategoryButton {float:left; border:2px solid var(--primary-colour); font-size:0.8em; color:var(--primary-colour); padding:8px 20px; margin-right:15px; font-weight: 900; text-transform: uppercase; margin-bottom: 10px; transition: background 0.3s ease-out, transform 0.3s ease-out;}
section#BlogPagination .CategoryButtonActive {float:left; border:2px solid var(--primary-colour); background-color:var(--secondary-colour); font-size:0.8em; color:var(--primary-colour); padding:8px 20px; margin-right:15px; font-weight: 900; text-transform: uppercase; margin-bottom: 10px;}
section#BlogPagination .CategoryButton:hover {float:left; border:2px solid var(--primary-colour); background-color:var(--secondary-colour); font-size:0.8em; color:var(--primary-colour); padding:8px 20px; margin-right:15px; font-weight: 900; text-transform: uppercase; margin-bottom: 10px;}

section#BlogPagination a:last-child .CategoryButton {margin-right:0px;}
section#BlogPagination a:last-child .CategoryButtonActive {margin-right:0px;}

section#BlogPagination .PrevBTN {float:left; margin-top:10px; width:auto;}
section#BlogPagination .NextBTN {float:right; margin-top:10px; width:auto;}


/* BLOG ARTICLE PAGE */

section#BlogArticleTop {float:left; clear:both; width:98%; margin:40px 0 30px 0; }
section#BlogArticleImage {float:left; clear:both; width:98%; margin:0 0 30px 0; }
section#BlogArticleImage p, section#BlogArticleImage img {margin: 0px;}
section#BlogArticleMain {float:left; clear:both; width:98%; margin:0 1% 30px 1%; }
.blogContent section li {color:#000; margin-bottom:1.5rem;}
.blogContent section ul {list-style-position: inside; margin-top:3rem; margin-bottom: 3rem;}
.blogContent section ol {margin-left: 20px;}
.blogContent section p {color: #000;}
.blogContent section h2 {margin-top: 55px; margin-bottom:40px;}
.blogContent section h3 {margin-top: 55px; margin-bottom:40px;}
.blogContent section img {margin-bottom: 45px;}
.blogContent section blockquote {border-left: 4px solid #532D8F;}
.blogContent section blockquote p { padding-left:15px; color:#000; font-size: 20px; font-style: italic;}
.hpServicesSection #Blog.latestBlog article {background-color: #FFF;}




@media only screen and (max-width: 1024px) { /* FOR IPAD LANDSCAPE AND SMALLER */

}


@media only screen and (max-width: 768px) { /* FOR IPAD PORTRAIT AND SMALLER */

        section#Blog article {width:48%;}
        
        section#BlogFeature article .Text  {width:100%; height:auto;}
        section#BlogFeature article .Image {width:100%; display: none;}


      #TopImage {float:left; width:100%;}
      #TopText {float:right; width:100%;}

      #BottomImage {float:right; width:100%;}
      #BottomText {float:left; width:100%;}
}



@media only screen and (max-width: 667px) { /* FOR IPHONE 6 PORTRAIT AND SMALLER */

        section#Blog article {width:98%;}
        section#Blog article .Text  {height:auto;}

}





@media only screen and (max-width: 1024px) { /* FOR IPAD LANDSCAPE AND SMALLER */

        section#Blog article {width:48%;}         
    
}


@media only screen and (max-width: 768px) { /* FOR IPAD PORTRAIT AND SMALLER */

        section#Blog article {width:48%;}
        
        section#BlogFeature article .Text  {width:100%; height:auto;}
        section#BlogFeature article .Image {width:100%; display: none;}

}

@media only screen and (max-width: 667px) { /* FOR IPHONE 6 PORTRAIT AND SMALLER */

        section#Blog article {width:98%;}
        section#Blog article .Text  {height:auto;}

}




/* BLOG ARTICLE PAGE */


@media only screen and (min-width: 768px) and (max-width: 992px) { /* FOR IPHONE 6 PORTRAIT AND SMALLER */

	section#BlogFeature article .Image {
		width: 45%;
		padding-top: 45%;	
}
	section#BlogFeature article .Text {
		width: 55%;
		padding: 30px;
}
	article .Text h2 {
		font-size: 1.5rem;
  		line-height: 2rem;
}
}