/* CSS Document */
/* CSS Document */
@-ms-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}
/* iPads (landscape) ----------- */
@media only screen 
and (min-width : 980px) 
and (max-width : 1024px) 
and (orientation : landscape) {
/* Styles */
.wrapper {
	 width: 100%;	
	 max-width: 980px;
}
.banner {
	height: auto;
}
#images, #images li img {
	max-width: 1024px;	
	max-height: 480px;
}
#images li {
	max-width: 1024px;	
}
.overlay {
	top: 0px;	
}
}
/*  OVERALL RESPONSIVE */
@media only screen 
and (max-width : 768px) 
 {
img {
		width: 100%;	
		height: 100%;
}
.main, .subnav {
		display: none;	
}
 /* Move nav off screen, setup transitions */
.mobile {
    width: 70%;
    position: absolute;
    left: -70%;
    top: 0;
    height: auto;
	background: -moz-linear-gradient(45deg,  rgba(2,146,211,1) 0%, rgba(255,16,111,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(2,146,211,1)), color-stop(100%,rgba(255,16,111,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(45deg,  rgba(2,146,211,1) 0%,rgba(255,16,111,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(45deg,  rgba(2,146,211,1) 0%,rgba(255,16,111,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(45deg,  rgba(2,146,211,1) 0%,rgba(255,16,111,1) 100%); /* IE10+ */
	background: linear-gradient(45deg,  rgba(2,146,211,1) 0%,rgba(255,16,111,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0292d3', endColorstr='#ff106f',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
	padding: 20px 0px;
	display: block;
  }
  
  /* Display nav items vertically */
.mobile ul {
	height: auto;
	text-align: left;}
.mobile ul  li {
      float: none;
      width: auto;
      text-align: left;
      padding: .5em 1em;
      box-sizing: border-box;
    border-bottom: 1px solid #888;
	display: block;
    -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box; /* Fixes Firefox bug */
	box-sizing: border-box;
    text-align: left;
	background: none;	
}
.mobile ul li a .droparrow {
	background: none;	
}
.mobile ul li ul {
	display: block;
	position: static;
	padding: 0px 20px;	
	border: 0px;
	background: none;
	width: auto;
	height: auto;
	text-align: left;
	-webkit-box-shadow: 0 0px 0px 0px #777777 ;
	-moz-box-shadow: 0 0px 0px 0px #777777;
	box-shadow: 0 0 0 0 #777777;
}
.mobile ul li ul li, .mobile ul li ul li:first-child {
	border: 0px;
	width: auto;
	padding-left: 20px;	
}
.mobile ul li a, .mobile ul ul li a {
	color: #FFF;	
}
.mobile ul li ul li a, .mobile ul li ul li a:hover, .mobile ul li ul li a, .mobile ul li.clicked ul li a, .mobile ul li ul li a span.arrow, .mobile ul li.current-menu-parent ul li a, .mobile ul li.current-menu-item ul li a, .mobile ul li.clicked ul li a:hover, .mobile ul li.current-menu-parent ul li.current-menu-item a:hover, .mobile ul li.current_page_item ul li a:hover, .mobile ul li.current_page_parent ul li a:hover, .mobile ul li ul li a:hover, .mobile ul li ul li.current_page_item a  {
	width: auto;	
	color: #FFF;
}
/* Reveal open/close buttons */
  a.open-panel, a.close-panel {
    display: block;
  }
  a.open-panel {
	background: url(images/nav-icon.png) no-repeat center center;
	width: 30px;
	height: 24px;
	text-indent: -9999px;
	position: absolute;
    top: 110px;
    left: 20px;
	padding: 2px;
  }
  a.close-panel {
	background: url(images/close-btn.png) no-repeat top center; 
	width: 30px;
	height: 30px;
    position: relative;
    top: -15px;
    left: 1em;
	text-indent: -9999px;
  }

.openNav #page {
    left: 0;
    -webkit-transform: translate3d(70%, 0, 0);
    -moz-transform: translate3d(70%, 0, 0);
    -ms-transform: translate3d(70%, 0, 0);
    -o-transform: translate3d(70%, 0, 0);
    transform: translate3d(70%, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
  }
  
  /* When the panel is closed, transition the page back to the left */
#page {
    left: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
  }
.header-top {
	padding-top: 20px;	  
  }
.logo {
	position: static;
	margin: 0px auto;
	top: auto;
	left: auto;	
}
.header-top .social {
	padding-top: 0px;
	height: 37px;
}
.banner {
	height: auto;	
}
#images {
	max-width: 768px;
	max-height: 240px;	
}
#thumbs {
	max-width: 768px;
	overflow: hidden;	
}
.overlay {
	top: 0px;	
}
.heroarea a {
	width: 30%;
	background-size: contain;	
}
.vh {
	left: 10px;
}
.si {
	left: 262px;	
}
.re {
	left: 511px;
}
.home .herotop {
	margin-bottom: 80px;	
}
.maincol.left {
	width: 95%;
	margin: 0px auto;
	float: none;	
}
.home .sidebar.right {
	width: 95%;
	margin: 0px auto;
}
.enq {
	max-width: 260px;	
}
.contacttext, .page-foot .social {
	display: none;	
}
.sectionimage.left {
	float: none;
	margin: 0px auto 5px;
	max-width: 392px;
	display: block;
		
}
.sectionimage img {
	margin: 0px auto;
}
.view {
	left: 45%;	
}
.post_text {
	position: static;
	top: auto;
	left: auto;
	padding-top: 0px;	
}
.service_post {
	width: 95%;
	margin: 0px auto 10px;
	padding-left: 0px;
	padding-right: 0px;	
}
.postcont.left {
	width: 90%;	
	margin: 0px auto;
	float: none;
	display: block;
}
.service_post .right {
	float: none;
	margin: 0px auto;
}
.service_post .right img {
	max-width: 161px;
	margin: 0px auto;	
}
.innerbanner #images {
	max-height: 396px;	
}
.innerbanner #thumbs {
	display: none;	
}
.contactform {
	width: 90%;
	display: block;
	float: none;
	margin: 0px auto 20px;	
}
.ajax-loader {
	height: 20px;	
}
.sectlink {
	margin-left: 3px;
	margin-right: 3px;	
	width: 32%;
	background-size: cover;
}
.sectlink:hover {
	margin-left: 3px;
	margin-right: 3px;	
	width: 32%;
	background-size: cover;
}
/*    .gallery .gallery-item {
        width: 33%;
    }*/
.summary {
	width: 95%;	
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */

}


/* iPads (portrait) ----------- */
@media only screen 
and (min-width : 768px) 
and (max-width : 980px) 
 {
/* Styles */
.wrapper {
	 width: 100%;	
	 max-width: 768px;
}


}
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (max-width : 480px) {
/* Styles */
#thumbs {
	display: none;	
}
#images {
    max-height: 150px;
    max-width: 480px;
}
.innerbanner #images {
    max-height: 248px;
    max-width: 480px;
}
.si {
	left: 167px;	
}
.re {
	left: 320px;
}
.herotop {
	height: 90px;	
}
.footercontact {
	background: #2C2E37;
	padding-top: 3px;	
}
.parallelogram.left {
	float: none;
	margin: 0px auto 3px;
	display: block;
	text-align: center;
    width: 80%;
		
}
.sectsummary {
	width: 95%;
	margin: 0px auto;
	
}
}
@media only screen and (max-width:640px) and (min-width: 481px) {
	.wrapper {
	width: 100%;	
	max-width:640px;
}
.heroarea a {
top: 45px;
}
.vh {
	left: 5px;	
}
.si {
	left: 210px;	
}
.re {
	left: 420px;
}
	.pagetitle {
	font-size: 25px;	
	}
	.pagetitleimage {
		height: 126px!important;	
		background-size: 100%;
	}
	.sectlink {
	width: 180px;	
	display: inline-block;
	margin: 0px 0px 5px;
	background-size: contain;
	font-size:10px;
	height: 180px;
}
.sectlink:hover {
	width: 180px;	
	display: inline-block;
	margin: 0px 0px 5px;
	background-size: contain;
	font-size:12px;
	height: 180px;
}
.sectlink span {
	width: 140px;	
	height: 60px;
}
.contactform label, .contactform input, .contactform textarea {
	width: 95%;
	display: block;
	float: none;	
}
 .pp_social, .pp_nav, .pp_description {
	display: none;	
}
.pp_close {
	display: block;	
}
#pp_full_res {
	min-width: 80%;
	max-width: 90%;	
}
.footercontact .blue, .footercontact .pink {
	font-size: 16px;	
}
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) and (max-width : 480px)  {
/* Styles */
.wrapper {
	width: 100%;	
	max-width:480px;
}
#thumbs {
	display: none;
}
.pagetitleimage {
	height: 186px;
	background-size:100% 100%;	
}
.sectlink {
	width: 30%;	
	display: block;
	margin: 0px 1% 10px;
	background-size: cover;
	font-size:10px;
	height: 130px;
}
.sectlink:hover {
	width: 30%;	
	display: block;
	margin: 0px 1% 10px;
	background-size: cover;
	font-size:10px;
	height: 130px;
}
.sectlink span {
	height: 20px;
	line-height: 14px;
	width: 110px;	
}
 .pp_social, .pp_nav, .pp_description {
	display: none!important;	
}
.pp_close {
	display: block;	
}
#pp_full_res {
	min-width: 80%;
	max-width: 90%;	
}
}
/*Galaxy S4 portrait*/
@media only screen 
and (max-width : 375px) {
.wrapper {
	width: 100%;	
	max-width:360px;
}
.heroarea a {

}
.vh {
	left: 5px;	
}
.si {
	left: 120px;	
}
.re {
	left: 240px;
}
	.pagetitle {
	font-size: 25px;	
	}
	.pagetitleimage {
		height: 126px!important;	
		background-size: 100%;
	}
	.sectlink {
	width: 160px;	
	display: inline-block;
	margin: 0px 0px 5px;
	background-size: contain;
	font-size:12px;
	height: 160px;
}
.sectlink:hover {
	width: 160px;	
	display: inline-block;
	margin: 0px 0px 5px;
	background-size: contain;
	font-size:12px;
	height: 160px;
}
.sectlink span {
	width: 140px;	
	height: 60px;
}
.contactform label, .contactform input, .contactform textarea {
	width: 95%;
	display: block;
	float: none;	
}
 .pp_social, .pp_nav, .pp_description {
	display: none;	
}
.pp_close {
	display: block;	
}
#pp_full_res {
	min-width: 80%;
	max-width: 90%;	
}
#sections li {
	width: 40%;
	display: inline-block;
	margin: 0px 2% 5px;	
}
.effects .img {
	float: none;
	height: 100%;	
	width: 100%;
}
#images li {
	max-width: 360px;	
}
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
.wrapper {
	 width: 100%;
	 max-width: 320px;	
}
#thumbs {
	display: none;
}
.pagetitleimage {
	height: 136px;
	background-size:cover;	
}
.logo {
	width: 80%;
	background-size: contain;	
}
.heroarea {
	background: none;
	padding-top: 20px;	
}
.herotop {
	height: auto;
	background: none;
	padding-top: 10px;	
}
#images li {
	max-width: 320px;	
}

.home .herotop {
	margin-bottom: 0px;	
}
.heroarea a {
	position: static;
	display: block;
	width: 90%;
	margin: 0px auto 5px;
	top: auto;
	left: auto;	
}
h1 {
	font-size: 22px;	
}
.footercontact .blue {
	font-size: 15px;	
}
.parallelogram.left {
	padding: 10px;	
}
.sectsummary {
	padding: 0px 10px;
}
.view {
	position: static;
	display: inline-block;
	margin: 0px auto;	
}
#sections li {
	width: 40%;
	display: inline-block;
	margin: 0px 2% 5px;	
}
.effects .img {
	float: none;
	height: 100%;	
	width: 100%;
}
.sectlink {
	width:90%;	
	display: block;
	margin: 0px auto 20px;
	background-size:100% 100%;
	font-size: 18px;
	padding-left: 0px;
	padding-right: 0px;
	text-align: center;
	height: 240px;
}
.sectlink:hover {
		width:90%;	
	display: block;
	margin: 0px auto 20px;
	padding-left: 0px;
	padding-right: 0px;
	background-size:100% 100%;
	font-size: 18px;
	text-align: center;	
	height: 240px;
}
.sectlink span {
	width: 90%;	
}
.contactform label, .contactform input, .contactform textarea {
	width: 95%;
	display: block;
	float: none;	
}
 .pp_social, .pp_nav, .pp_description {
	display: none!important;	
}
.pp_close {
	display: block;	
}
#pp_full_res img {
	width: 100%;
}
}

@media only screen 
and (min-width : 480px) 
and (max-width : 767px) {
	.wrapper {
		 width: device-width;
		 max-width: 767px; 	
	}

}

/*------------------------------------------------*/
/*------------------[TRANSITIONS]-----------------*/
/*------------------------------------------------*/

@-webkit-keyframes fadeBottom { 0% { opacity: 0; -webkit-transform: translateY(10%);} 100% { opacity: 1; -webkit-transform: translateY(0);} }
@-moz-keyframes fadeBottom { 0% { opacity: 0; -moz-transform: translateY(10%); } 100% { opacity: 1; -moz-transform: translateY(0); } }
@-o-keyframes fadeBottom { 0% { opacity: 0; -o-transform: translateY(10%); } 100% { opacity: 1; -o-transform: translateY(0); } }
@keyframes fadeBottom { 0% { opacity: 0; transform: translateY(10%); } 100% { opacity: 1; transform: translateY(0); } }

@-webkit-keyframes fadeLeft { 0% { opacity: 0; -webkit-transform: translateX(-10%); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@-moz-keyframes fadeLeft { 0% { opacity: 0; -moz-transform: translateX(-10%); } 100% { opacity: 1; -moz-transform: translateX(0); } }
@-o-keyframes fadeLeft { 0% { opacity: 0; -o-transform: translateX(-10%); } 100% { opacity: 1; -o-transform: translateX(0); } }
@keyframes fadeLeft { 0% { opacity: 0; transform: translateX(-10%); } 100% { opacity: 1; transform: translateX(0); } }

@-webkit-keyframes fadeRight { 0% { opacity: 0; -webkit-transform: translateX(10%); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@-moz-keyframes fadeRight { 0% { opacity: 0; -moz-transform: translateX(10%); } 100% { opacity: 1; -moz-transform: translateX(0); } }
@-o-keyframes fadeRight { 0% { opacity: 0; -o-transform: translateX(10%); } 100% { opacity: 1; -o-transform: translateX(0); } }
@keyframes fadeRight { 0% { opacity: 0; transform: translateX(10%); } 100% { opacity: 1; transform: translateX(0); } }

@-webkit-keyframes fadeTop { 0% { opacity: 0; -webkit-transform: translateY(-10%); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@-moz-keyframes fadeTop { 0% { opacity: 0; -moz-transform: translateY(-10%); } 100% { opacity: 1; -moz-transform: translateX(0); } }
@-o-keyframes fadeTop { 0% { opacity: 0; -o-transform: translateY(-10%); } 100% { opacity: 1; -o-transform: translateX(0); } }
@keyframes fadeTop { 0% { opacity: 0; transform: translateY(-10%); } 100% { opacity: 1; transform: translateX(0); } }

@-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

@-webkit-keyframes slideWidth { 0% { width: 0; } 100% { } }
@-moz-keyframes slideWidth { 0% { width: 0; } 100% { } }
@-o-keyframes slideWidth { 0% { width: 0; } 100% { } }
@keyframes slideWidth { 0% { width: 0; } 100% { } }



 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
   
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
/*   .gallery {
        -moz-column-count: 2;
        -moz-column-gap: 0px;
        -webkit-column-count: 2;
        -webkit-column-gap: 0px;
        column-count: 2;
        column-gap: 0px;
        width: 95%
		margin: 0px auto;
    }
     
    .gallery .gallery-item{
        width: 100%;
    }*/
}
.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(232, 98, 86, 0.8) url(images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}