body {
	background-color: #ffffff;
	background-image:url(../graphics/bgs2017.png);
	font-weight: normal;
	font-family: "brandon-grotesque",sans-serif;
	font-size:140%;
	margin:0;
	padding:0;
	color:#2C4D4D;
}

.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

.animate-item {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 3s;
  animation-name: animatebottom;
  animation-duration: 3s;
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}


#bodyoverlay {
   width: 100%; height: 100%; 
   margin: 20px 0; 
   background-image:url(../graphics/midbg2017m.png);
   background-position: center 240px;
   background-repeat:no-repeat;
}


#wrap {
	margin:auto;
	width:70%;
	min-height:900px;
	padding-top:60px;
}

#logotop {
	position:relative;
	width:100%;
	height:52px;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#9296cb+0,9296cb+50,9296cb+100&0.84+0,0+40,0+60,0.84+100 */
    background: -moz-linear-gradient(left,  rgba(146,150,203,0.84) 0%, rgba(146,150,203,0) 40%, rgba(146,150,203,0) 50%, rgba(146,150,203,0) 60%, rgba(146,150,203,0.84) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left,  rgba(146,150,203,0.84) 0%,rgba(146,150,203,0) 40%,rgba(146,150,203,0) 50%,rgba(146,150,203,0) 60%,rgba(146,150,203,0.84) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right,  rgba(146,150,203,0.84) 0%,rgba(146,150,203,0) 40%,rgba(146,150,203,0) 50%,rgba(146,150,203,0) 60%,rgba(146,150,203,0.84) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d69296cb', endColorstr='#d69296cb',GradientType=1 ); /* IE6-9 */
    background-repeat:no-repeat;
}

#rplogo {
	width:220px;
	height:120px;
	position:absolute;
	z-index:50001;
	top:-40px;
	margin:auto;
	left:0;
	right:0;
}

#rplogo a {
	width:220px;
	height:120px;
	background-image:url(../graphics/doublelogo.png);
	background-repeat:no-repeat;
	background-position: 0 -120px;
	display:block;
}

#rplogo a:hover {
	background-position: 0 0;
}

#rplogoml {
	width:220px;
	height:120px;
	position:absolute;
	z-index:50001;
	top:-40px;
	margin:auto;
	left:0;
	right:0;
}

#rplogoml a {
	width:220px;
	height:120px;
	background-image:url(../graphics/doublelogoml.png);
	background-repeat:no-repeat;
	background-position: 0 -120px;
	display:block;
}

#rplogoml a:hover {
	background-position: 0 0;
}



#topmenu {
	width:96%;
	margin:auto;
	padding-top:14px;
	padding-bottom:14px;
	min-height:50px;
	font-family: "brandon-grotesque",sans-serif;
	font-size:18px;
}

#topmenu a:link { color: #2C4D4D; }
#topmenu a:visited { color: #2C4D4D;}
#topmenu a:hover { color: #437575; text-decoration: none;}
#topmenu a:active { color: #437575;}


#topmenu li { height: 37px; float: right; display: inline; margin: 0; padding: 0; text-align: center; font-size: 1.4em; }
#topmenu li a { display: block; height: 37px; padding-left: 9px; text-decoration: none; margin: 0; color: #C7DEDE; font-weight: normal; }
#topmenu li a span { display: block; height: 33px; line-height: 30px; padding: 4px 9px 0 0; letter-spacing: .05em; }


a.main_nav_active { background: transparent url('sitegraphics/bg_right.png') no-repeat 0 0;}
a:link.main_nav_active, a:visited.main_nav_active, a:active.main_nav_active{ color: #ffffff;}
a.main_nav_active:hover{ color: #F6C016;}
a.main_nav_active:hover span{ color: #F6C016;}

#contentmain {
	width:100%;
	background-color:#ffffff;
	border:2px solid #AFB0BF;
	min-height:400px;
	margin:auto;
   -moz-box-shadow: 0 0 .6em #2223;
   -webkit-box-shadow: 0 0 .6em #2223;
   box-shadow: 0 0 .6em #2223;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

.topspacer {
	height:1.5em;
	width:100%;
}

.topbanner {
	width:900px;
	margin: 0 auto;
	border:2px solid #AFB0BF;
}

.topimg {
	width:90%;
	margin: 0 auto;
	max-width:1600px;
}

.topimg img {
	border:2px solid #AFB0BF;
	width:100%;
	height:auto;
}


.toptext {
	text-align:center;
	margin-top:0;
	padding-top:10px;
}



.nightday {
		position:fixed;
		top:10px;
		right:10px;
	    z-index:1000;
	}
	
	

.innercontent, .innercontentfp {
    margin:auto;
    margin-top:46px;
	margin-bottom:46px;
    padding-top:40px;
    min-height:300px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px -2px 2px -1px rgba(56,55,56,1);
    -moz-box-shadow: 0px -2px 2px -1px rgba(56,55,56,1);
    box-shadow: 0px -2px 2px -1px rgba(56,55,56,1);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e1e2ed+0,ffffff+100 */
    background: rgb(225,226,237); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(225,226,237,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(225,226,237,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(225,226,237,1) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e2ed', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
    position:relative;
}

.innercontent {
	width:90%;
}

.innercontentfp {
	width:90%;
}

.icinner {
    margin:16px 10% 30px 10%;
}

.subinner {
	margin: 0 20px 20px 20px;
}


.subinner h2, .subinner h3 {
	margin-bottom:0;
}

.subinner p {
	margin-top:0;
}


/*
.thebox {
	width: 40%;
	margin-left:5%;
	margin-right:4%;
	float:left;
	margin-top:10px;
}

.theboxr {
	width: 40%;
	margin-left:4%;
	margin-right:4%;
	float:left;
	margin-top:10px;
}

.thebox img, .theboxr img {
	width:100%;
	height:auto;
}

*/

.displayleft {
	border:2px solid #AFB0BF;
	-moz-box-shadow: 0 0 .4em #222;
    -webkit-box-shadow: 0 0 .4em #222;
    box-shadow: 0 0 .4em #222;
	
}

.displayleft:hover {
	border:2px solid #244847;
}

.displayright {
	border:2px solid #AFB0BF;
	-moz-box-shadow: 0 0 .4em #222;
    -webkit-box-shadow: 0 0 .4em #222;
    box-shadow: 0 0 .4em #222;
}

.displayright:hover {
	border:2px solid #244847;
}

.weetext {
	font-style:italic;
	width: 100%;
	position:relative;
	padding-top:6px;
}

.clearright {
	clear:right;
	height:40px;
}

.clearleft {
	clear:left;
	height:10px;
}

.clearleftbot {
	clear:left;
	height:30px;
}

#pgtitle {
	width:160px;
	height:42px;
	position:absolute;
	left:59px;
	top: -22px;
}

#submenu {
	border-top:1px solid #036;
	border-bottom:1px solid #036;  
	margin-left:30px;
	margin-right:30px;
	padding-top:4px;
	padding-bottom:4px;
}

#submenu a:link, #submenu a:visited {
	text-decoration:none;
	color:#fff;
}

#submenu a:hover {
	color:#AAC2C2;
}


#charity, #weather {
	width:48%;
	float:left;
}

#charity, #weather {
	text-align:center;
	margin-left:2%;
	margin-top:2em;
}

.weather-contain {
    position: relative;
    padding-bottom: 80%;
    height: 0;
	margin:auto;
	max-width:360px;
}

.weather-contain iframe {
position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

/*portfolio page*/

.triangle {
  position: relative;
  margin: auto;
  padding: 1em;
  box-sizing: border-box;
  /*background: #391352E6;*/
  background: #FBFBFB;
  /*box-shadow: 0px 3px 3px 0 rgba(0, 0, 0, 0.4);*/
  color:#391352;
  
}
.triangle::after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin-left: -0.1em;
    left: 30%;
    box-sizing: border-box;
    border: 1em solid black;
    /*border-color: transparent transparent #391352E6 #391352E6;*/
	border-color: transparent transparent #FBFBFB #FBFBFB;
    transform-origin: 0 0;
    transform: rotate(135deg);
    top: 0em;
}

.fade {
	width:424px;
	height:292px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#090314+0,090314+100&0+0,0.8+100 */

background: -moz-linear-gradient(top,  rgba(9,3,20,0) 0%, rgba(9,3,20,0.8) 100%); /* FF3.6-15 */

background: -webkit-linear-gradient(top,  rgba(9,3,20,0) 0%,rgba(9,3,20,0.8) 100%); /* Chrome10-25,Safari5.1-6 */

background: linear-gradient(to bottom,  rgba(9,3,20,0) 0%,rgba(9,3,20,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00090314', endColorstr='#cc090314',GradientType=0 ); /* IE6-9 */


}

.fade img {
	width:100%;
	height:100%;
}


.thebox {
	width: 424px;
	margin:10px auto;
	float:none;
}

.theboxr {
	width: 424px;
	margin:10px auto;
    float:none;
}

.thebox, .theboxr {
	position:relative;
	overflow:hidden;
}

.thebox img, .theboxr img {
	width:420px;
	height:288px;
}


.fadeLink { 
   z-index: -1000;
  position: absolute;
  left:0;
  right:0;
  top: 0;
  opacity: 0; 
  visibility: hidden; 
 /* -webkit-transition: visibility 0.2s linear, opacity 0.2s linear;
  -moz-transition: visibility 0.2s linear, opacity 0.2s linear;
  -o-transition: visibility 0.2s linear, opacity 0.2s linear; */
-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	-ms-transform: translateY(0px);
	transform: translateY(0px);
  }
  
.fadebg { 
   z-index: -1001;
  position: absolute;
  left:0;
  right:0;
  top: 0;
  opacity: 0; 
  visibility: hidden; 
 -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
  }  
  

.theboxr:hover .fadeLink, .thebox:hover .fadeLink { 
  z-index: 1000;
  visibility: visible; 
  opacity: 1; 
  -webkit-transform: translateY(224px);
	-moz-transform: translateY(224px);
	-ms-transform: translateY(224px);
	transform: translateY(224px);
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
  }
  
 .theboxr:hover .fadebg, .thebox:hover .fadebg { 
  z-index: 999;
  visibility: visible; 
  opacity: 1; 
	-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
	-moz-transition: -moz-transform 0.4s, opacity 0.1s;
	transition: transform 0.4s, opacity 0.1s;
  } 
  
.grid {
    width:50%;
	float:left;
	margin:0;
	padding:0;
}

@media (max-width: 1396px) {
	
	.grid {
    width:100%;
	float:none;
}
	
}

@media (max-width: 600px) {
	
.fade {
	width:324px;
	height:222px;
}
.thebox {
	width: 324px;
}

.theboxr {
	width: 324px;
}

.thebox img, .theboxr img {
	width:320px;
	height:218px;
}

.theboxr:hover .fadeLink, .thebox:hover .fadeLink { 
  -webkit-transform: translateY(158px);
	-moz-transform: translateY(158px);
	-ms-transform: translateY(158px);
	transform: translateY(158px);
  }

	
	
}

/*fancybox*/


.fancybox-type-iframe .fancybox-nav {
    width: 80px;       
}

.fancybox-type-iframe .fancybox-nav span {
    visibility: visible;
    opacity: 0.3;
}

.fancybox-type-iframe .fancybox-nav:hover span {
    opacity: 1;
}

.fancybox-type-iframe .fancybox-next {
    right: -80px;
}

.fancybox-type-iframe .fancybox-prev {
    left: -80px;
}

.fancybox-close {
    position: absolute;
    top: -30px;
    right: -50px;
    width: 36px;
    height: 36px;
	visibility: visible;
    opacity: 0.3;
}

.fancybox-close:hover {
	 opacity: 1.0;
}


.weeplus {
	height:20px;
	width:20px;
	position:absolute;
	right:0;
	top:6px;
}
.weeplus a:link {
	background-image:url(../graphics/doubleplus.png);
	height:20px;
	width:20px;
	background-repeat:no-repeat;
	background-position: 0 -20px;
	display:block;
}

.weeplus a:hover {
	background-position: 0 0;
}


/* ----------- Form ----------- */

#formblock {
	padding-bottom:16px;
}

label{
display:block;
font-weight:bold;
text-align:right;
width:160px;
float:left;
}

@media (max-width: 1575px) {

label{
text-align:left;
width:80%;
float:none;
margin-left:10px;
}

}

input{
	float:left;
	border:solid 1px #060D46;
	width:260px;
	margin:2px 0 20px 10px;
	padding:4px;
	background-color:#CBCCDA;
}

input[type="image"] { 
width:180px;
height:60px;
border:0;
background-color:transparent;
background-image:url(../graphics/i_send_pair.png);
background-position: 0 -80px;
background-repeat:no-repeat;
margin:auto;
position:absolute;
left:0;
right:0;
}

input[type="image"]:hover { 
background-position: 0 -6px;
}

input[type="submit"] {
	background-color:transparent;
}

textarea{
float:left;
border:solid 1px #060D46;
width:260px;
margin:2px 0 20px 10px;
padding:4px;
background-color:#CBCCDA;
}


.spancenbreak {
	clear:left;
	height:10px;
}

.flushtop {
	margin-top:0;
	font-size:24px;
}

#contactdetails {
	float:right;
	color:#437575;
	width:44%;
}

#contactform {
	float:right;
	width:56%;
	position:relative;
}

.phone {
	background-image: url(../graphics/i_phone_t.png);
	background-repeat:no-repeat;
	padding-left:50px;
	padding-top:10px;
	height:43px;
	background-size:contain;
}

.mail {
	background-image:url(../graphics/i_email.png);
	background-repeat:no-repeat;
	padding-left:50px;
	padding-top:10px;
	height:43px;
	background-size:contain;
}

.dev, .fu, .design {
	margin-bottom:0;
}


.tsub {
	margin-top:0px;
	font-style:italic;
}

.phone a:link, .mail a:link {
	text-decoration:none;
}


.thirds {
	float:left;
	width:33%;
}
.thirds-center {
	border-left:2px dotted #9293B4;
	border-right:2px dotted #9293B4;
	float:left;
	width:33%;
}


.tinner {
	margin:10px 20px;
}

.tinner img {
	float:left;
	margin-right:10px;
}

@media (max-width: 1442px) {
	
	.tinner img {
	float:none;
	margin:10px auto;
}

.dev, .fu, .design {
	margin-top:0;
}

}

#pgfoot {
	text-align:center;
	margin-bottom:16px;
}


#phonefoot {
	text-align:center;
	color:#C7DEDE;
	margin:auto;
	margin-bottom:16px;
	
}

.home {
	margin-bottom:0;
}

.hereandthere {
	margin-top:0;
	font-size:12px;
}

#quotebox {
	width:96%;
	margin:auto;
	border-top:1px solid #336;
	border-bottom:1px solid #336;
	padding-top:10px;
	padding-bottom:10px;
	background-image:url(../graphics/rpqbg.png);
	background-position:center left;
	background-repeat:no-repeat;
}

.quote {
	font-size:22px;
	margin-bottom:.3em;
	margin-left:10px;
}

.author {
	margin-top:0;
	text-align:right;
	margin-right:10px;
	font-style:italic;
}



@-ms-viewport {
	width: device-width;
}
@viewport {
	width: device-width;
}



@media (max-width: 1220px) {
		#wrap {
	width: 800px;
	padding-top:60px;
}
#contentmain {
	width:800px;
}

}

@media (max-width: 999px) {
	
	#wrap {
	width: 800px;
	padding-top:60px;
}
#contentmain {
	width:800px;
}

.innercontent {
	width:96%;
}

.innercontentfp {
	width:96%;
}

.topbanner {
	width:96%;
}

.thebox, .theboxr {
	width: 40%;
	margin-left:4%;
	margin-right:4%;
	
}

.displayleft, .displayright {
	width: 100%;
	height:auto;
	
}


.topimg {
	width:94%;
	height:inherit;
	text-align:center;
}

.topimg img {
	width:100%;
	height:auto;
}


/* ----------- Form ----------- */

#formblock {
	padding-bottom:16px;
}

input{
	float:none;
	width:80%;;
}

textarea{
float:none;
width:80%;
}



}

@media (max-width: 800px) {
	
	#wrap {
	width: 98%;
	padding-top:60px;
}

#contentmain {
	width:100%;
	border-left:none;
	border-right:none;

}

.innercontent {
	width:96%;
}

.innercontentfp {
	width:96%;
}

.topbanner {
	width:96%;
}

#topmenu {
	width:auto;
	padding-top:24px;
	padding-bottom:14px;
	min-height:40px;
	float:none;
	margin:auto;
	text-align:center;
	display:block;
}



}



@media (max-width: 643px) {
	
#pgtitle {
	margin:auto;
	left:0;
	right:0;
}

#topmenu { 
min-height:50px;
margin-left:0;
padding-left:0;
padding-top:30px;
}

#topmenu li { height: 30px; float: right; display: inline; margin: 0; padding: 0; text-align: center; font-size: 1em; }
#topmenu li a { height: 30px; }
#topmenu li a span { display: block; height: 30px; line-height: 24px; padding: 4px 9px 0 0; letter-spacing: .05em; }

.displayleft, .displayright {
	width: 100%;
	height:auto;
}
	
#charity, #weather {
	width:100%;
	float:none;
	margin-left:0;
}

#charity h4 {
	padding-top:10px;
}


.fancybox-type-iframe .fancybox-nav {
    width: 0;       
}

.fancybox-type-iframe .fancybox-nav span {
    visibility:hidden;

}

.fancybox-type-iframe .fancybox-nav:hover span {
    visibility:hidden;
}

.fancybox-type-iframe .fancybox-next {
    right: 0;
}

.fancybox-type-iframe .fancybox-prev {
    left: 0;
}

.fancybox-close {
    top:0;
	right: 20px;
    width: 36px;
    height: 36px;
	visibility: visible;
}

.fancybox-title-float-wrap .child {
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	        border-radius: 5px;
}

#contactdetails {
	float:none;
	color:#C7DEDE;
	width:100%;
}

#contactform {
	float:none;
	width:100%;
	position:relative;
}

.icinner {
    margin: 16px 10% 30px 10%;
}

.subinner {
    margin: 0 6px 20px 6px;
}

input{
	float:none;
	width:90%;
	margin-left:0;
	margin-right:0;
}

textarea{
float:none;
width:90%;
margin-left:0;
margin-right:0;
}

label {
	margin-left:0;
}

.thirds {
	float:none;
	width:100%;
	padding-bottom:10px;
	border-bottom:2px dotted #9293B4;
}
.thirds-center {
	border-bottom:2px dotted #9293B4;
	padding-bottom:10px;
	border-right:none;
	border-left:none;
	float:none;
	width:100%;
}

.tinner img {
	float:left;
	margin:0;
	margin-right:10px;
}


.thebox, .theboxr {
	width:90%;
	margin: 0 auto;
	padding-bottom:14px;
	float:none;
	}
	
.fancybox-wrap {
	width:300px !important;
	margin: 30px 24px !important;
}
	
.fancybox-skin{
border-width: 5px !important;
width:300px !important;
}

}

/* Mobile devices */
@media (max-width: 359px) {
	
#topmenu { 
min-height:50px;
}
	
#topmenu li { height: 30px; float: right; display: inline; margin: 0; padding: 0; text-align: center; font-size: 1.2em; }
#topmenu li a { height: 30px; }
#topmenu li a span { display: block; height: 30px; line-height: 24px; padding: 4px 9px 0 0; letter-spacing: .05em; }

.fancybox-wrap {
	width:260px !important;
	margin: 30px 16px !important;
}
	
.fancybox-skin{
border-width: 4px !important;
width:260px !important;
}

.fancybox-close {
    top:0;
	right: 20px;
    width: 36px;
    height: 36px;
	visibility: visible;
}

	
}

.waveblock {
  position:relative;
  text-align:center;
  /*background: linear-gradient(60deg, rgba(84,58,183,1) 0%, rgba(0,172,193,1) 100%);*/
  color:white;
}

.flex { /*Flexbox for containers*/
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:300px;
}

/* Animation */

.parallax > use {
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5)     infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}
@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}

@media (max-width: 768px) {
  .waves {
    height:40px;
    min-height:40px;
  }
}