

/*--- Barnabas CSS - Overarching style ---*/

/*--------- BF light blue: #5091cd -------*/
/*--------- BF dark blue: #004990 -------*/


/* Font awesome region button */
.fa-stack-2x {
font-size: 0.7em !important;
background-color: #044990;
border-radius: 20%;
padding: 0.2rem;
height: 3rem;
width: 3rem !important;
color: #fff;
}

.fa-inverse {
color: #fff;
font-size: 1rem !important;
text-align: center !important;
padding: 0.2rem;
width: 3rem !important;
}

html {font-family: "robotoregular",sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-size:62.5%;}

body {
background-color: /*#e7e7e7 */ #fff;
font-size:1.8rem;
}

html, body {
    overflow-x: hidden;
}

@media screen and (max-width:767px) {
body {
background-color: #fff; /*Change background colour on mobile */
}
}


a:visited,a:hover,a:focus,a:active   {
text-decoration:none ;
}

section {
	min-height: 640px;
}

.sectionBody {
padding: 0px 0px 0px 0px;
top:0px; 
position:relative;
background-color: #fff;
z-index:0;
/*min-height: 740px;*/
}

.sectionBodyMargin {
padding: 0rem 1rem 0px 1rem;
top:0px; 
position:relative;
background-color: #fff;
z-index:0;
min-height: 740px;
}

@media screen and (max-width:767px) { /*Mobile */
.sectionBodyMargin,.sectionBody {
min-height: 0px;
    }

}


.centre {
text-align:center;
}

footer {
background-color: #999;
border-top: 3px solid #444;
height:auto;
padding:1rem;
font-size:1.4rem;
line-height:1.875rem;
min-height: 25rem;
}

footer p, footer, footer a, footer strong {
color: #eee;
} 


footer a:hover {
color: #333;	
}

.copyright {

font-size:1.2rem;
padding-top:1rem;
color: #777;
}

.select-region {
    font-size: 1.2rem; display: block; line-height: 1.2rem; top: 2px; position: relative; width: 40px;
}

a {
outline: 0 !important; /* Remove dotted outline from links */	
}

p a {color: #5091cd; 
background-color: transparent;}

p a:hover {color: #5091cd; 
background-color: transparent;}

.whiteText,.white-text {
color: #fff;
}

a.white-text,a.whiteText {
    color: #fff;
}

a.white-text:hover,a.whiteText:hover {
    color: #fff;
    text-decoration: underline;
}

li {
/*margin-bottom:1rem;*/
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: #004990;
    font-family: "robotoregular",sans-serif;
    font-weight: 500;
    line-height: 1.1;
}



.image-full img { /* Image full width */
/*	width:auto;*/
	margin-bottom:1rem;
	display: block;
    height: auto;
    max-width: 100%;
    margin-left: auto; /* Makes the image appear in the centre of the screen*/
    margin-right: auto;	
}

.image-full { /* Image full */
	width:100%;
	margin-bottom:1rem;
	display: block;
    height: auto;
    max-width: 100%;
    margin-left: auto; /* Makes the image appear in the centre of the screen*/
    margin-right: auto;	
}

 .img-responsive img { /*Needed for figure*/
    max-width: 100%;
    height: auto;
 }

.small-bot-margin { /* Gives a small bottom margin to an element */
margin-bottom: 1rem;
}

/* Format fallbacks if others don't exist */

.image-caption,.caption, figcaption, .atribution, .source {
color: #808080;
font-size: 1.4rem;
margin-bottom: 1.8rem;
}


blockquote {
    border-left: 5px solid #5091cd;
    margin: 0 0 20px;
    padding: 10px 20px;
}


.date {
font-size: 1.6rem;
text-align: left;
border-bottom: 1px dotted #5091CD;
padding-bottom: 1rem;
}

@media screen and (max-width:992px) { 
.date {
text-align: left;
}
}

/*--------- Colour bars -----------*/
/*The colourbars go across the screen in a colour */


/* Standard colour bar */

.colourbar { 
background-color: #004990;
color: #fff;
width:100%;
padding-top: 2rem;
position:relative;
padding-bottom: 4rem;
}

.cbar { 
width:100%;
position:relative;
padding-top:1rem;
padding-bottom:1rem;
/*margin-bottom: 1rem;*/
}

@media screen and (max-width:767px) { /*Remove bottom padding and margin on cbar mobile */
.cbar { 
padding-bottom:1rem;
margin-bottom: 1rem;
}
}

.colourbarThin {
background-color: #004990;
color: #fff;
width:100%;
padding-top: 0rem;
position:relative;
padding-bottom: 0rem;
height: 0.4rem;
}

.colourbar:before, .colourbar:after,.colourbarThin:before, .colourbarThin:after, .cbar:before, .cbar:after{
  content: "";
  position: absolute;
  background: #004990;  /* Match the background */
  top: 0;
bottom: 0;
  width: 9999px;
} 
.colourbar:before,.colourbarThin:before, .cbar:before {
  right: 100%; 
}
.colourbar:after,.colourbarThin:after, .cbar:after {
  left: 100%;
}

.colourbar p { /* Sets the text colour to white on dark blue colourbar */
color: #fff;
}

/* Light blue colour bar */

.cblue { 
background-color: #5091CD;
color: #fff;
}

.cblue:before, .cblue:after {
  background: #5091CD;  /* Match the background */
} 

.cred { 
background-color: #b01117;
color: #fff;
}

.cred:before, .cred:after {
  background: #b01117;  /* Match the background */
} 



/* Grey colour bar */

.cgrey { 
background-color: #eee;
color: #404040;
}

.cgrey header { /* Temporary for projects articles*/
color: #404040;

}

.cgrey:before, .cgrey:after {
  background: #eee;  /* Match the background */
} 

.cgrey p { /*Ensures the colour is grey on colourbar */
color: #404040;
}

/* Dark grey colour bar */

.cdark-grey { 
background-color: #333;
color: #fff;
}

.cdark-grey:before, .cdark-grey:after {
  background: #333;  /* Match the background */
} 

/* White colour bar */

.cwhite { 
background-color: #fff;
color: #404040;
}

.cwhite:before, .cwhite:after {
  background: #fff;  /* Match the background */
} 

.cwhite p { /*Ensures the colour is grey on colourbar */
color: #404040;
}

/* Basic Needs colour bar */

.cbasic-needs-tint, .cbasic-needs-tint:before, .cbasic-needs-tint:after { 
background-color: #fffbeb;
}

.cbasic-needs, .cbasic-needs:before, .cbasic-needs:after { 
background-color: #ebc900;
}


/* Christian education colour bar */


.cchristian-education-tint,.cchristian-education-tint:before, .cchristian-education-tint:after {
  background: #fde9f1;  
} 

.cchristian-education,.cchristian-education:before, .cchristian-education:after { 
background-color: #e23d96;
}


/* Christian resources colour bar */


.cchristian-resources-tint,.cchristian-resources-tint:before, .cchristian-resources-tint:after {
  background: #e9ebf6;  /* Match the background */
} 

.cchristian-resources, .cchristian-resources:before, .cchristian-resources:after { 
background-color: #222962;
}



/* Church building colour bar */


.cchurch-building-tint,.cchurch-building-tint:before, .cchurch-building-tint:after {
 /* background: #edd6be;   Match the background */
  background: #f9ead3;  /* Match the background */
} 

.cchurch-building, .cchurch-building:before, .cchurch-building:after { 
background-color: #ad680e;
}


/* Convert care colour bar */


.cconvert-care-tint,.cconvert-care-tint:before, .cconvert-care-tint:after {
 /* background: #edd6be;   Match the background */
  background: #f4e4cd;  /* Match the background */
} 

.cconvert-care, .cconvert-care:before, .cconvert-care:after  { 
background-color: #d09a3f;
}


/* Disaster relief colour bar */


.cdisaster-relief-tint,.cdisaster-relief-tint:before, .cdisaster-relief-tint:after {
  background: #f9d9cb;  /* Match the background */
} 

.cdisaster-relief, .cdisaster-relief:before, .cdisaster-relief:after { 
background-color: #b11416;
}

/* Leadership training colour bar */


.cleadership-training-tint,.cleadership-training-tint:before, .cleadership-training-tint:after {
  background: #f0eaf4;  /* Match the background */
} 

.cleadership-training, .cleadership-training:before, .cleadership-training:after { 
background-color: #9875b4;
}

/* Medical care colour bar */


.cmedical-care-tint,.cmedical-care-tint:before, .cmedical-care-tint:after {
  background: #f9fae8;  /* Match the background */
} 

.cmedical-care, .cmedical-care:before, .cmedical-care:after { 
background-color: #367125;
}

/* Pastors and evangelists colour bar */


.cchristian-workers-tint,.cchristian-workers-tint:before, .cchristian-workers-tint:after {
  background: #dee1f2;  /* Match the background */
} 

.cchristian-workers, .cchristian-workers:before, .cchristian-workers:after { 
background-color: #4863ae;
}

/* Small business colour bar */


.csmall-business-tint,.csmall-business-tint:before, .csmall-business-tint:after {
  background: #eff5de;  /* Match the background */
} 

.csmall-business, .csmall-business:before, .csmall-business:after { 
background-color: #82c341;
}

/* Victims of Violence colour bar */


.cvictims-of-violence-tint,.cvictims-of-violence-tint:before, .cvictims-of-violence-tint:after {
  background: #fee7d7;  /* Match the background */
} 

.cvictims-of-violence, .cvictims-of-violence:before, .cvictims-of-violence:after { 
background-color: #f26531;
}

/* Water colour bar */


.cwater-tint,.cwater-tint:before, .cwater-tint:after {
  background: #eff9fe;  /* Match the background */
} 

.cwater, .cwater:before, .cwater:after { 
background-color: #6fccdc;
}

/* Prayer partner colour bar */

.cprayer-partner, .cprayer-partner:before, .cprayer-partner:after { 
background-color: #5CD0F5;
}

.cprayer-partner p,.cprayer-partner li,.cprayer-partner h1,.cprayer-partner h2,.cprayer-partner h3.cprayer-partner ,h4 {
	color:#fff;
}


/* Church partner colour bar */

.cchurch-partner, .cchurch-partner:before, .cchurch-partner:after { 
background-color: #79922D;
}

.cchurch-partner p, .cchurch-partner li, .cchurch-partner h1,.cchurch-partner h2,.cchurch-partner h3,.cchurch-partner h4 {
	color:#fff;
}


/* Area partner colour bar */

.carea-partner, .carea-partner:before, .carea-partner:after { 
background-color: #E1A705;
}

.carea-partner p, .carea-partner li, .carea-partner h1,.carea-partner h2,.carea-partner h3,.carea-partner h4 {
	color:#fff;
}

/* Speaker partner colour bar */

.cspeaker-partner, .cspeaker-partner:before, .cspeaker-partner:after { 

background-color: #AB3F63;
}

.cspeaker-partner p,.cspeaker-partner li,.cspeaker-partner h1,.cspeaker-partner h2,.cspeaker-partner h3,.cspeaker-partner h4 {
	color:#fff;
}

/* General colour bar */

.cgeneral-tint,.cgeneral-tint:before, .cgeneral-tint:after {
  background: #CCDAE8;  /* Match the background */
} 

.cgeneral, .cgeneral:before, .cgeneralr:after { 
background-color: #004990;
}

/*Removes bluebar across whole width*/
.homepage-centre-8 .cbar:before, .homepage-centre-8 .cbar:after {
width: 0px;
}
.homepage-centre-8 .get-involved-title {
background-color: #fff;
color: #5091CD;
}
.homepage-centre-8 .get-involved-title h1.white-text {
  color: #5091CD;
}


/* Remove margin at different screen sizes */
@media screen and (min-width:1201px) { /* Desktop*/

.no-margin-lg /*Used for getting rid of margin on a column */
	{
	padding-left:0rem; padding-right: 0rem;
	}
} 
@media screen and (min-width:993px) and (max-width:1200px) { /* Tablet Landscape*/

.no-margin-md /*Used for getting rid of margin on a column */
	{
	padding-left:0rem; padding-right: 0rem;
	}
} 
@media screen and (min-width:768px) and (max-width:992px) { /* Tablet Portrait */

.no-margin-sm /*Used for getting rid of margin on a column */
	{
	padding-left:0rem; padding-right: 0rem;
	}
} 
@media screen and (max-width:767px) {/*Mobile */
.no-margin-xs /*Used for getting rid of margin on a column */
	{
	padding-left:0rem; padding-right: 0rem;
	}
	
.add-margin-xs {
	margin-left:1rem; margin-right: 1rem;	
}
} 


/*----------------------------------------------------------------------------------*/
/*--------------------------------------- DEBUG -----------------------------------*/
/*----------------------------------------------------------------------------------*/


.debugdata
{
    font-size:70%;
    font-family:Arial;
}

@media screen and (max-width:1200px){
.debugdata {display:none;}

}

.ErrorText 
{
	font-size: 1.2rem;
    position:absolute;   
    bottom: 0;

    z-index:200;
    color:white;
    background-color:red;
}


/*----------------------------------------------------------------------------------*/
/*----------------------------------------- Menu -----------------------------------*/
/*----------------------------------------------------------------------------------*/
.navbar-static-top /* Gets rid of line under logo */
{
border-bottom-width: 0px;
border-color:#5091cd;
}

/* Menu element */
.nav.navbar-nav  li  a {
color: /*#fff*/#333;
text-shadow: none !important;
font-family:"robotoregular",sans-serif;
font-size: 1.25rem;
font-weight: bold;
border-right: 0px #ccc solid;
}

.logo-padding {
    margin-top: 1rem; margin-bottom: 0.5rem
}


@media screen and (min-width:992px) { /* The topbar positioning */

.navbar-brand {
padding: 0.5rem 0 0 0;
left:2rem;
position: absolute;

}

.navbar-brand img {
width:100%;

}
}

@media screen and (min-width:768px) and (max-width:991px) { /* The topbar positioning - iPad Portrait */

.navbar-brand {
padding: 1rem 0 0 0;
left:2rem;
position: absolute;
}

.navbar-brand img {
	width:100%;
	}

    .logo-padding {
        min-height: 70px;
    }

}

.navbar-collapse.in {
    overflow-y: visible;
}

@media screen and (max-width:767px) {
	.navbar-brand img {
	width:150px;

	}

	.navbar-brand {
	width: 100%;
	margin: 0 auto;
	text-align:center;
	padding-bottom: 0rem;
	padding-top: 0.2rem;
	}

	.logo-padding /* This gives the logo padding on mobile mode */
	{
	padding-left:1.5rem;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	}

	.nav.navbar-nav /* Menu at mobile mode */
	{
	background-color:#5091cd;
	}
	.nav.navbar-nav li {
	border-top: 1px #fff dotted;
	}

	.nav.navbar-nav li a {
	color: #fff;
	text-align:center;
	font-size:1.7rem;
	}

	.nav.navbar-nav li a:hover {
	background-color:#fff;
	color:#5091cd;
	}

	.nav-container { /* Centres the navigation buttons on mobile */
	 margin: 0 auto;
		width: 23rem;

	}
}

.navbar-static-top {
background-image: none !important;
}

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {
border-color: #fff !important;
}

.navbar-inverse {
background-color: #ffffff;
}

.navbar-wrapper .navbar {
border-radius: 0px !important;

}

.navbar-wrapper {
	margin: 0px 0px 0rem 0px !important;
	background-color:#fff;
	/*height: 8rem;*/
	z-index:2;
	border-bottom: 3px solid #5091CD/*#5091cd #004990*/;
}

.navbar {
margin-bottom: 0px;
}

.navbar-nav {
    margin: 0 -15px;
}


/* Hover on menu element */

/* Top menu elements */

.nav li.dropdown ul.dropdown-menu li a{ /*Dropdown menu */
color:#fff;
padding:0.5rem 0 0.5rem 1rem;
background-color:#5091cd;
}

.nav  li.dropdown a:hover {
color: #fff;
text-shadow: none !important;
background-color: #5091cd;

}

.nav li.dropdown ul.dropdown-menu li a:hover {
background-color: #004990;
color: #fff;
}

.dropdown li {
margin-bottom: 0rem;
}

/* Dropdown menu items on hover 
li.dropdown ul.dropdown-menu li a:hover {
color:#fff;
background-color:#5091CD;
}*/

/* Changing the active menu element */
li.active, li.active a  {
background-color: #5091CD !important;
background-image: none !important;
background-image: none !important;
-webkit-box-shadow: inset 0 0px 0px rgba(0,0,0,0.25) !important;
box-shadow: inset 0 0px 0px rgba(0,0,0,0.25) !important;
}

.nav {
position: relative;
}







/*----------------------------------------------------------------------------------*/
/*-------------------------------------- Responsive --------------------------------*/
/*----------------------------------------------------------------------------------*/

.navbar-toggle, .navbar-inverse .navbar-nav > .open > a:focus {
 background-color: #5091cd !important;
 border-width: 0px;
 color: #fff;
}

.navbar-toggle:hover {
 background-color: #004990 !important;
 border-width: 0px;
}

.navbar-toggle { /*Mobile Menu button */
border-radius: 50%;
-webkit-border-radius: 100px;
height: 3.5rem;
width: 3.5rem;
float:left;
margin-top:2.5rem;
margin-right:1rem;
outline: 0;
}

.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 3px;
}

.navbar-toggle .icon-bar {
    border-radius: 1px;
    display: block;
    height: 3px;
    width: 100%;
}
	



/*-------------------------------------------------------------------------------------*/
/*-------------------------------------- DROPDOWN MENU --------------------------------*/
/*------------------------------------------------------------------------------------*/
/*
@media screen and (min-width:768px){
	.dropdown-menu {
		background-color: #5091cd;
		color: #fff;
		border: 0px;
		box-shadow: none;
		border-radius: 0px;
		padding: 0px 0 0 0;
		min-width:20rem;
		float: left;
		left: auto;	
		right:0;
		position:absolute;	
		}	
		
	/* Adding an arrow */
/*	
	.nav li.dropdown ul.dropdown-menu:after {
		border-right: 1.0rem solid #5091cd;
		border-top: 1.0rem solid rgba(0, 0, 0, 0);
		content: " ";
		height: 0;
		position: absolute;
		right: 4rem;
		text-decoration: none;
		top: -1.0rem;
		transform: rotate(0deg);
		-ms-transform: rotate(0deg);		
		-webkit-transform: rotate(0deg);		
		}
		
	.nav li.dropdown ul.dropdown-menu:before {
		border-right: 1.0rem solid #5091cd;
		border-top: 1.0rem solid rgba(0, 0, 0, 0);
		content: " ";
		height: 0;
		position: absolute;
		right: 3rem;
		text-decoration: none;
		top: -1.0rem;
		transform: rotate(90deg);
		-ms-transform: rotate(90deg);
		-webkit-transform: rotate(90deg);		
	}		

	
	li.dropdown:hover  ul.dropdown-menu {
		display: block;
		color:red;
	}

	/* Secondary Dropdown Menu */
/*	
	ul.dropdown-menu li ul.dropdown-menu
	{
	position:relative;
	left:-100%;
	}
	
	
	ul.dropdown-menu li ul.dropdown-menu li {
		position:absolute;		
		display: none;		

	}

	.dropdown-menu li:hover ul.dropdown-menu li { 

			display:block;
	}

	


}

*/




@media screen and (min-width:768px){
	.dropdown-menu {
		background-color: #5091cd;
		color: #fff;
		border: 0px;
		box-shadow: none;
		border-radius: 0px;
		padding: 0px 0 0 0;
		float: none;
		/*left: 0;
		position: fixed; */
		top: 0;
		/*width: 100%;*/
		/*height:auto;*/
		/*padding-bottom: 2rem;*/
		margin: 0px;
    padding-bottom: 1.5rem;
    padding-top: 0.5rem;
		}	
	/*	
.dropdown li {
    float: left;
    margin-bottom: 0rem;
    width: 300px;
}
		
	li.dropdown:hover  ul.dropdown-menu {
		display: block;
	}*/		
		
}





@media screen and (max-width:767px){ /* Don't show menu */
	ul.dropdown-menu {
	display:none;
	visibility: none;
	}	
}

/* Secondary Dropdown Menu 

.dropdown-menu .dropdown-menu {
	left: 0%;
	background-color: #EFEFEF;
    top: 100%;
	margin-top: 0px;

	visibility: hidden;		
	position: relative;
}
.dropdown-menu li:hover ul.dropdown-menu {
	visibility: yes;
}
*/


/*------------------------------------------------------------------------------------------*/
/*-------------------------------------- REGION MENU MODULE --------------------------------*/
/*------------------------------------------------------------------------------------------*/

.regionmenu{
	margin:0px;
	padding:0px;
	position:absolute;
	left: 2.4rem;
	list-style-type: none;
	z-index:3;
	top: 0rem;
	}
	
@media screen and (max-width:767px){
	.regionmenu{
		right:120px;
		top:5px;
		display:none;visibility:none;
	}
}

@media screen and (min-width:768px) { /* NOT Mobile - Get rid of region button */
	button.regionmenu-mobile {
		display:none;visibility:none;
	}
}
.regionmenu li {
	font-size: 1.2rem;
	display: inline;
}	
	
#languages{
    background:#fff;
    position:relative;

}


.regionmenu > li{
    
}

.language-dropdown{
    display:none;
    /*position:absolute;
    top:17px;*/
	color: #fff;
	background-color:#fff;
	border: #999 1px solid;
	margin:0px;
	padding:0px;	
	list-style-type: none;
	padding: 5px;
	width: 14rem;
    position: absolute;
	right: -1.5rem;
	top:1.9rem;
}

.language-dropdown li {
	padding: 2px;
	float:left;
	width: 4rem;
	height: 4rem;

}

.regionmenu li:hover ul{
    display:block;
text-align:center;
}

.language-dropdown li a {
	color: #5091cd;	
font-size:1rem;
font-weight: bold;
display:block;
}

.language-dropdown li a:hover {
background-color:#5091cd;
text-decoration: none;
	color: #fff;	
}

.language-dropdown:after {
	/*border-bottom: 8px solid rgba(0, 0, 0, 0);*/
    border-right: 1.4rem solid #999;
    border-top: 1.4rem solid rgba(0, 0, 0, 0);
    content: " ";
    height: 0;
    position: absolute;
    right: 0rem;
    top: -1.5rem;
    transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-webkit-transform: rotate(90deg);	
	text-decoration:none;
}




/* Small version for mobile */
@media screen and (max-width:767px){
	.regionmenu-mobile {
	width: 5rem;
	height:5rem;
	float:left;
	background-image:url("/resources/UK-phone-button.png");
	background-color: rgba(0, 0, 0, 0);
	border: 0 none;
	margin-top: 1rem;
	margin-right: 1rem;
	}
}

/*-------Images--------*/
.image-large img {
width: 100%;
margin: 0rem 0 0rem 0;
}

.image-left img {
float:left;
margin-right:1rem;
}

.image-right img {
float:right;
margin-left:1rem;
}

.image-centre div {
margin:0 auto;
text-align:center;
}

.img_caption_left {
float:left;
padding-right: 1rem;
}

.img_caption_right {
float:right;
padding-left: 1rem;
}

.img_caption_centre {
float:middle;
clear: both;
padding-right: 1rem;
}

.img_caption_large {
width:100%;
}

.image-hidden { /* Don't display the image */
visibility:none;
display:none;
}


/*------- WYSIWYG  ---------*/

.edit-button {
position: relative;
width: 32px;
height: 32px;
margin: 1rem 0 1rem 1rem;
display: block;
float: right;
z-index: 1;
}

.edit-button:hover {
border:#fff 2px solid;
}

/*------------- Banner Module ---------------*/
/*------------- Banner Module ---------------*/

.bx-wrapper .bx-viewport {
box-shadow: 0 0 0px #FFFFFF !important;

}

.bx-wrapper {
width: 100%;
background-color: #eee;
}

ul.RotatingBanner {
text-align:center;
}


/* Next Symbol */
a.bx-next {
    background-color: #eee;
    border-radius: 50%;
    color: #428BCA;
    display: block;
    font-family: "Courier New",Courier,monospace;
    font-size: 15rem;
    height: 9.5rem;
    right: 5%;
    line-height: 1;
    position: absolute;
    text-align: center;
    top: 12rem;
    transform: rotate(90deg);
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);	
    width: 9.5rem;
	outline: 0;	
}

a.bx-next:hover,a.bx-prev:hover  {
    background-color: #428BCA;
	color: #fff;
}

a.bx-prev {
    background-color: #eee;
    border-radius: 50%;
    color: #428BCA;
    display: block;
    font-family: "Courier New",Courier,monospace;
    font-size: 15rem;
    height: 9.5rem;
    left: 5%;
    line-height: 1;
    position: absolute;
    text-align: center;
    top: 12rem;
    transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);	
    width: 9.5rem;
	outline: 0;
}




.bx-pager-item {
width:15px;
height:15px;
border-radius: 100px;
margin: 0 0.5rem 1rem 0.5rem;
background-color:#fff;
display: inline-block;
}
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 10px;
top: -35px;
position:relative;

}

	
/* Left Caption */
img.caption-left+div.bx-caption span {
    background-color: rgba(0, 0, 0, 0);
    color: #FFFFFF;
    font-family: "Arial";
    font-size: 4.5rem;
    font-weight: bold;
    line-height: 0.9;
    padding-left: 20%;
    /*position: absolute;*/
    text-align: left;
    text-transform: uppercase;
    /*top: 25%;*/
	  display: table-cell; 
  vertical-align: middle; 
}

/* Right Caption */
img.caption-right+div.bx-caption span {
	color:#fff;
	width: 25%;
    /*top: 20%;*/
	right: 25%;	
    /*position: absolute;	*/
	line-height: 1.08;	
	background-color:transparent;
    padding-right: 20%;
    font-size: 4.5rem;
	font-weight: bold;
	font-family: "Arial";	
	text-transform: uppercase;	
	  display: table-cell; 
  vertical-align: middle; 
    text-align: right;  
}

	.bx-caption {
 color: #5091cd;
    font-family: "robotoregular";
    font-size: 6rem;
    position: absolute;
    top: 0;
    width: 100%;
	}


	a.bx-pager-link.active{
	background-color: #5091cd;	
	border-radius: 100px;
	width: 15px;
	height: 15px;	
	}

 
	.bx-viewport {

	width:100% !important;
	}
	
	/* Determines height of banner at different views */
	.bannerImage {
	height:50rem;
	}	
	
	ul.RotatingBanner li img{
		max-width:100%;
		width: 100%;
		position:relative;
		max-width: 2000px;
	}
	
	
	
}

@media screen and (max-width:1200px) and (min-width:992px) { /* Tablet landscape*/	 
	.bx-viewport {

	/*width:1666px !important;*/
	}
	
	/* Determines height of banner at different views */
	.bannerImage {
	height:30rem;
	background-size:130rem;
	}
	/*
	ul.RotatingBanner li img{
		width:100%;
		left:8.35%;
		position:relative;
		max-width: 2000px;
	}	*/

	
	
}

@media screen and (max-width:991px) and (min-width:768px) { /* Tablet portrait*/
/*	.bx-viewport {
	height: 40rem !important;

	
	}*/

	
	/* Determines height of banner at different views */
	.bannerImage {
	height:48rem;
	background-size:195rem;
	}
	
	a.bx-prev,a.bx-next { /*Make next and previous buttons disappear */
	display:none;
	}	
	
	/*.RotatingBanner img {
	width:100%;
	}	*/
	
	ul.RotatingBanner li {
	left:-200px;
	}
}

@media screen and (max-width:767px){ /*Mobile */


    .bx-caption {
        color: #fff;
        font-size: 2rem;
        padding: 1rem 0rem;
    }

    .bx-caption span {
     color: #fff;
    }
	
	a.bx-prev,a.bx-next { /*Make next and previous buttons disappear */
	display:none;
	}
	
/*	.bx-viewport {
	height: 20rem !important;
	}	*/
	
	/* Determines height of banner at different views */
	/* Determines height of banner at different views */
	.bannerImage {
	height:30rem;
	background-size:195rem;
	}
	
	/*.RotatingBanner img {
	width:50%;
	}*/
	
	
		.bx-caption {
		display: block;
		height: auto;
		position: relative;
		float:left;
		color:#004990;
		width: 100%;	
		left: 0px;
		text-align:center;
		background-color:#428BCA;
		top:0px;
	}
	
	/* Left Caption */
img.caption-left + div.bx-caption span {
    background-color: rgba(0, 0, 0, 0);
    color: #FFFFFF;
    display: block;
    font-family: "Arial";
    font-size: 4.5rem;
    font-weight: bold;
    line-height: 0.9;
    text-align: center;
    text-transform: uppercase;
	padding-left: 0px;
}	
	

	/* Pager item */
	.bx-wrapper .bx-pager {	
		top:0px;
		float:left;
		text-align:center;
	}
	.bx-pager-item {
		background-color: #5091cd;	
	}
	
	a.bx-pager-link.active{
		background-color: #004990;	
		border-radius: 100px;
		width: 15px;
		height: 15px;	
	}

	.bx-pager.bx-default-pager {
		margin: 0 auto;
		width: 100%;
	}	
	
}
	

.bx-controls.bx-has-pager {
    height: 0;
}



.bx-pager-link {
text-indent: -9999px;
display: block;
outline: 0;

}

a.bx-pager-link:hover, a.bx-pager-link:active,a.bx-pager-link:visited,a.bx-pager-link:focus {
outline: none;
}

/*----------------------------------------------------------------- */
/*--------------------------- Get Updates --------------------------*/
/*----------------------------------------------------------------- */

.get-updates {
background-color: #5091CD;
width: 100%;
/*padding-bottom: 0.4rem;
padding-top: 0.4rem;*/
}

	.get-updates-mobile {
	display:none;
	visibility: none;
	}

@media screen and (max-width:767px){
	.get-updates {
	display:none;
	visibility: none;
	}

	.get-updates-mobile {
	display:block;
	visibility: visible;
    background-color: #5091CD;
	}
}


.social-media-logo img,.social-media-logo {
width:32px;
/*transition: all 0.2s linear;*/
margin-left: 2px;
margin-right: 2px;

}
.social-media-logo {
float: left;
margin-top: 0.5rem;
}

.social-media-logo:hover {
opacity: 0.7;
filter:Alpha(opacity=70); /* IE8 and earlier */
}

figure.social-media-logo figcaption{
	display:none;
}

.share-item {
    float:left;
    width:100%;
    margin-bottom:1rem;
}

@media screen and  (max-width:1199px) {
    .share-item {
        float: left;
        margin-bottom: 1rem;
        margin-right: 1rem;
        width: auto;
    }
}

.signup-container {
text-align:center;
border-right: 1px #fff solid;
line-height: 1.8;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}

.signup-container a  {
    color: #FFFFFF;
    display: block;
    font-size: 1.8rem;
    margin: 0 auto;
    transition: all 0.2s linear 0s;
    width: 20rem;
	outline: 0;
}

.signup-container a:hover  {
text-decoration: none;
opacity: 0.6;
filter:Alpha(opacity=60); /* IE8 and earlier */
color:/*#5091cd*/ #fff;
}


@media screen and (max-width:767px) {
    .signup-container {
        border-right: 0px;
    }
    .signup-container:first-child {
        border-bottom: 1px #fff solid; 
    }
}

.social-container {
    margin: 0 auto;
	width: 11.8rem;
}

.signup-logo .signup-logo-img img {
width:30px;

}
.signup-logo  {
    float: right;
    width: 1rem;
}

.homepage-buttons{
width:50%;
-webkit-transition:opacity 0.2s linear; /* For Safari 3.1 to 6.0 */
transition: opacity 0.2s linear;
	outline: 0;
}

.homepage-textbuttons
{
font-size: 1.8rem /*2.25rem*/;
color:#004990;
padding-top:0rem;
background-color:transparent;
text-transform: capitalize;
}


@media screen and (max-width:767px){
.homepage-buttons{
width:100%;
-webkit-transition:opacity 0.2s linear; /* For Safari 3.1 to 6.0 */
transition: opacity 0.2s linear;
}
.homepage-textbuttons {
font-size:1.25rem
}

.social-media-logo { /*Social Media logos */
/*width:4rem;*/
margin-right: 1rem;
margin-bottom: 1rem;
}

}

.button-container {
text-align:center;
padding:1em 0.5rem;

}


.button-container a {
font-size: 1.8rem;
color:#5091cd;
padding-top:1rem;
/*
 -webkit-transition: opacity linear 0.2s;
  -moz-transition: opacity linear 0.2s;
  -o-transition: opacity linear 0.2s;
  transition: opacity linear 0.2s;
*/
}

.button-container input:hover {
color:#5091cd;
text-decoration: none;
border:0px;
opacity: 0.7;
filter:Alpha(opacity=70); /* IE8 and earlier */
}


/*------------------------------------------------------------------------- */
/*--------------------------- Get Involved Module --------------------------*/
/*------------------------------------------------------------------------- */

.get-involved-item {
    margin-bottom:2rem;
    
}

.get-involved-item img{
width:100%;
height:auto;
-webkit-border-radius: 50%;	
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}

.get-involved-item figcaption {
    margin-bottom:0rem;
}


.get-involved-item a{
-webkit-transition:opacity 0.2s linear; /* For Safari 3.1 to 6.0 */
transition: opacity 0.2s linear;
border-radius: 50%;

}

.get-involved-item a:hover{
opacity: 0.7;
filter:Alpha(opacity=70); /* IE8 and earlier */
}


hr {
border-top:0px #5091cd solid;
margin-top: 0px;
}

hr.line-dotted {
border-top:1px #5091cd dotted;
margin-top: 0px;
}

hr.grey-event {
    border-top: 2px #ccc solid;
    margin: 1rem 0rem 2rem 0rem;
}

.get-involved-item p {
    color: #777;
    font-size: 2rem;
    margin: 0 0 10px;
    position: relative;
	float:middle;
    text-align: center;

}

.get-involved-title {
width:100%;
color:#5091cd;
text-align:center;
margin-bottom:2rem;
font-family: "robotoregular",sans-serif;
}

.get-involved-title h1{
	font-family: "robotoregular",sans-serif;
}

.homepage-centre-8 {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}
    @media screen and (max-width:767px) {
        .homepage-centre-8 {
            width: 100%;
        }
    }
    /*------------------------------------- Search ---------------------------------- */
    .search; {
    /*border: 1px solid #CCCCCC;*/
	margin: 0.5rem 0;
}

@media screen and (min-width:768px) and (max-width:991px) { /* Tablet Portrait */
/*.search {
	right: 41px;
    top: 60px;
}*/
}

.search-input {
    /*border: 0 solid #CCCCCC;*/
	border-width: 0px;
    color: #004990;
	background-color: #eee;
    /*font-size: 1.2rem;*/
	padding:0.2rem;
    overflow: hidden;
	height: 3rem;
}



.search-button {
    width: 30px;
float:right;

color: transparent;
background: url('/resources/search-button-white.png') no-repeat scroll center center / auto 1em, linear-gradient(#fff, #fff) repeat scroll 0 0 rgba(0, 0, 0, 0);
background-image: url('/resources/search-button-white.png');
background-position: center;
background-repeat: no-repeat;
background-color: #5091CD;
text-indent: -9999em;
height: 3rem;
border-width: 0px;

}

.search-button:hover {
background-color: #004990;	
}

@media screen and (max-width:767px) { /* Mobile */
.search {
display:none;visibility:none;
}

.search-mobile {
	width: 3.5rem;
	height:3.5rem;
	float:left;
	margin-right:0.6rem;
	margin-left: 0.6rem;
	background-image:url("/resources/search-phone-button-white-outline.png");
	background-color: rgba(0, 0, 0, 0);
	border: 0 none;
	margin-top: 2.5rem;
    background-size: 3.5rem;
    background-repeat: no-repeat;
	}
	
.search-input {
    border: 0px solid #CCCCCC;
	background-color: #f0f0f0;
    color: #004990;
    font-size: 2.2rem;
    left: 0px;
    position: relative;
    top: 0px;
    width: 100%;
	margin: 1rem 0;
	padding:0.5rem;
}
}

@media screen and (min-width:768px) { /* NOT Mobile - Get rid of Search button */
	button.search-mobile {
		display:none;visibility:none;
	}
}


.searchpage input.search-input { /* Used on the search page to make the search bar */
border:1px #C0C0BF solid;
border-right:20px;
font-size: 1.8rem;
height:3rem;
width:100%;
margin-bottom: 2rem;
margin-top:0rem;
background-color: #F0F0F0;
}

.searchpage {
font-size: 1.4rem;
}

.searchpage input.search-button { 
border:0px #555 solid;
font-size: 1.8rem;
width: 40px;
background: url('/resources/search-button-large.png') no-repeat scroll center center / auto 2em, linear-gradient(#004990, #004990) repeat scroll 0 0 rgba(0, 0, 0, 0);
height:3rem;

}

@media screen and (max-width:767px) { /* Change size of search bar on mobile */
	/*.searchpage input.search-input { 
	width:80%;
	}
	.searchpage input.search-button { 
	width:20%;
	}*/
}

.searchpage input.search-button:hover { 
background: url('/resources/search-button-large.png') no-repeat scroll center center / auto 2em, linear-gradient(#5091CD, #5091CD) repeat scroll 0 0 rgba(0, 0, 0, 0);
}

.search-result:hover { /*A search result */
background-color: #F0F0F0;
}


/*--------------------------------- Donate button ------------------------------ */

.donate-button-small
{
    height: 3rem;
text-align:center;
color:#fff;
border-radius: 0rem;
background-color:#c50000;
padding:0.5rem 0rem;
margin: 0 0 0.2rem 0;
clear:both;
-webkit-transition:opacity 0.2s linear; /* For Safari 3.1 to 6.0 */
transition: opacity 0.2s linear;
font-weight:bold;
font-size:1.5rem;
z-index:1;
/*border: 2px solid #B01117;
line-height: 1.5rem;*/
border-radius: 0px;
}

.donate-button-appeal { /* Used for appeal - multiple buttons */
color: #fff;
background-color: #B01117;
font-size: 2.0rem;
font-weight: bold;
margin-bottom: 1rem;
/*margin-left: 5%;*/
margin-right: 5%;
padding: 1rem;
text-align: center;
width: 45%;
position: relative;
display: block;
word-break: break-word;
border: 0px;
float: left;
/*min-height: 8rem;*/
border: 2px solid #B01117;
border-radius: 5px;
}

a.donate-button-appeal:focus, a.donate-button-appeal-single:focus,.donate-button-appeal-single-left:focus {
    color: #333;
    background-color: #fff;
    border: 2px solid #333;
}

.donate-button-appeal-container /* For surrounding multiple .donate-button-appeal buttons*/{
    float: left;
    width: 100%;
}

.donate-button-appeal-single,.donate-button-appeal-single-left /* A standalone button */{
color: #fff;
background-color: #B01117;
font-size: 2.0rem;
font-weight: bold;
margin-bottom: 1rem;
margin-left: auto;
margin-right: auto;
padding: 1rem;
text-align: center;
width: 40%;
position: relative;
display: block;
word-break: break-word;
border: 2px solid #B01117;
border-radius: 5px;
}

.donate-button-appeal-single-left {margin-left: 0;}

.donate-button-appeal-image {float:left; width: 50%;}

.donate-button-appeal-image > .donate-button-appeal {width:95%; margin-left: 0px;}

.donate-button-appeal-image img {max-width:100%; margin: 0 auto; display: block; text-align: center; padding-right: 5%;}

.donate-button-appeal-single:hover,.donate-button-appeal-single-left:hover,.donate-button-appeal:hover {
    border: 2px solid #B01117;
    background-color: #fff;
    color: #B01117;

}

@media screen and (min-width:992px) { /* Tablet Landscape and up*/

	.donate-button-mobile {
		display:none;visibility:none;
	}
	
}

@media screen and (min-width:768px) and (max-width:991px) { /* Tablet Portrait */
	.donate-button-mobile {
		display:none;visibility:none;
	}

}

@media screen and (max-width:767px) {/*Mobile */
	.donate-button-small {display:none;visibility:none;}

    .donate-button-mobile {
      display: block;
      visibility: yes;
      width: 3.5rem;
      height: 3.5rem;
      float: left;
      margin-right: 0rem;
      background-color: #C1292E;
      background-repeat: no-repeat;
      margin-top: 2.5rem;
      border: 0px;
      background-size: 3.5rem;
      border-radius: 100%;
      text-align: center;
    }

    a.donate-button-mobile span {
      color: #fff;
      line-height: 3.5rem;
      font-size: 2.8rem;
      position: relative;
    }
    .donate-button-appeal-single, .donate-button-appeal,.donate-button-appeal-single-left {
        width: 100%;
        float: left;
    }
    .donate-button-appeal-image {width: 100%;}

}



a .donate-button-small:hover {
opacity:0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
border: 0px;
text-decoration: none;
color: #fff;
}




.donationFormButton {
background-color: #C50000;
}

/*---------------- News in brief --------------*/

.newsinbriefItem {
border-bottom: 1px #5091cd dotted;
margin-bottom: 1rem;
padding-bottom: 1rem;
}

.newsinbriefImage img {
width:100%;
}

/* -------------- Donate ---------------- */

.donation-form-container {
	background-color: #fff; 
	border-top: 2px dotted #5091CD;	
	color: #333;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    min-height: 61.5rem;
}

.donation-form-container h2{
	color: #004990;
}

.donation-form-container input[type=checkbox]
{
  /* Double-sized Checkboxes */
width:30px;
height: 30px;
outline: 0;
}

/*
.donation-form-container p,.donation-form-container td,.donation-form-container span,.donation-form-container h2 {
	color: #333;

}*/

    .don-validation { /*Used for validation on donation form*/
        /*color:red;*/
    }



.donationFormButton{
    background-color: #5091CD !important;
    color:#fff !important;
    font-family:"robotoregular",sans-serif !important;
    font-size:2.5rem !important;
	border: 0px;
	padding: 1rem;
	margin-bottom: 1rem;
	margin-right: 1rem;	
	width: 48%;
    border-radius: 0.5rem;
}

.donationFormButton:hover {
    background-color: #004990 !important;
    color:#fff !important;	
}

.donationFormButton-NotSelected{
    background-color: #e9e9e9 !important;
    color:#333 !important;
    font-family:"robotoregular",sans-serif !important;
    font-size:2.5rem !important;
	border: 0px;
	padding: 1rem;
	margin-bottom: 1rem;
	margin-right: 1rem;	
	width: 48%;	
    border-radius: 0.5rem;
}


.donationFormButton-NotSelected:hover {
    background-color: #004990!important;
	color:#fff !important;
}

.donationFormButton-Selected{
    background-color: #004990 !important;
    color:#fff !important;
    font-family:"robotoregular",sans-serif !important;
    font-size:2.5rem !important;
	border: 0px;
	padding: 1rem;
	margin-bottom: 1rem;
	margin-right: 1rem;	
	width: 48%;		
    border-radius: 0.5rem;
}


.don-image { /*Image on donation form*/
            width:30%;
             float:left;
             margin-right:1.5rem;
             margin-bottom:1rem;
}

/* Dropdown */
/*.don-drop {
	width:300px;
	margin-left:1rem;
}*/

.don-button {
	border-radius: 50%;
	width:300px;
}

.don-amount {
    background-color: #5091cd;
    border: 0 none;
    border-radius: 50%;
    color: #fff;
    font-family: "robotoregular",sans-serif;
    /*font-size: 3.5rem;*/
    /*height: 8rem;*/
    padding: 1rem;
   /* width: 8rem;*/
	
font-size: 3rem;
height: 12rem;	
 width: 12rem;
}

.don-amount.selected,.don-amount-button.selected { /*Selected amounts */
background-color: #004990;	
}


.don-amount:hover,.don-amount:hover ~ .don-amount-button,.don-amount-button:hover  {
	background-color: #004990;
	outline: 0;
}

.don-amount-button {
    background-color: #5091cd;
    bottom: 0;
    color: #fff;
    margin: 0 -1rem;
    padding: 0.5rem;
    position: absolute;
    width: 100%;
    border-radius: 0.5rem;
}

.don-other-amount {
    background-color: #eee;
    border: 0 none;
    color: #000;
    font-size: 3rem;
    padding: 0.5rem;
    width: 100%;
	margin-bottom: 3.5rem
}

.don-other-amount-container {
overflow:hidden;	
}

.don-currency {
    display: block;
    float: left;
    font-size: 4rem;
    margin-right: 1rem;
}

.don-option {
    float: left;
    /*height: 14rem;*/
    margin-right: 1rem;
    padding: 1rem;
    position: relative;
    text-align: center;
    width: 23.4%;
}

.don-option:nth-child(4) {
	margin-top:3.5rem;
}

.don-details {
float:left;
width: 100%;
margin-bottom:2rem;
margin-top:2rem;
border-bottom: 1px dotted #5091CD;

}

.don-info {
    background-color: #eee; 
    color: #000; 
    padding:1rem;
}

.don-details input,.don-details select {
    background-color: #eee;
    border: 0 none;
    color: #000;
    font-size: 3rem;
    margin-bottom:1rem;
    width: 96%;
    /*Design change:*/
    border: 3px solid #eee;
    padding: 0.5rem;
}


.don-details input:focus {
    background-color: #fff;
    border: 3px solid #004990 !important;
    color: #000;
}


.donation-form-container select {
    background-color: #eee;
    border: 0 none;
    min-width:20rem;
    padding:0.5rem;
    margin: 1rem 0;

}

.don-details select { /*Dropdown select item */
	/*width:20rem;*/

}

    .don-details tbody tr td:nth-child(2) {
       
    }





.don-details tbody tr td input,.don-details tbody tr td select {
	font-size: 1.8rem;
    padding:0.5rem;
    
}

.don-details tbody tr td input[type="button"] { /* buttons e.g. lookup postcode*/
        background-color: #5091cd;
        border: 0px;
        color: #fff;

}

    .don-details tbody tr td input[type="button"]:hover {
        background-color: #004990;
    }

.don-details tbody tr td:nth-child(1) {
    font-size: 1.8rem;
    padding-right: 1.5rem;
    text-align: right;
    font-weight: bold;
    
}

.don-payment {
	
}

.donate-form-title {
    font-size: 8rem;
    font-weight: 200;
    padding-right: 1.5rem;
    text-align: right;	
}

.donate-heading {
	 color: #004990;
    font-family: "robotoregular",sans-serif;
    font-size: 4.5rem;
    font-weight: 300;
    text-align: left;

}

label.donate-select-project {
    clear: both;
    margin-bottom: 0rem;
    display: block;
}

.don-drop {
    background-color: #eee;
    border: 0 none;
    padding: 1rem;
    width: 100%;
}

.don-amount-button {
    background-color: #5091cd;
    color: #fff;
    margin-top: 1rem;
    padding: 0.5rem;
	position: relative;
	border: 0px;
}


.don-validation {
color:red;
}

.don-min-height { /*Gives a minimum height on the blue bar to eliminate white*/
    min-height: 65rem;
    margin-bottom: 0rem;
}

@media screen and (min-width:992px) and (max-width:1200px) { /* Tablet Landscape and up*/
    
    .don-container input {
        width:46%;
    }                                                             
                                                             
.don-option {
        width:50%;
        float:left;
        margin-right: 0rem;
    }

    .donationFormButton {
        width:47%;
        margin-top:1rem;
    }
	
}


@media screen and (min-width:768px) and (max-width:991px) { /* Tablet Portrait */
    .don-option {
        width:50%;
        float:left;
        margin-right: 0rem;
    }

    .donate-form-title {
        text-align:left;

    }

.donationFormButton, .donationFormButton-Selected{
    
	width: 47%;

}

}



@media screen and (max-width:767px) {

    .donate-form-title {
        font-size:3.2rem;
        text-align:left;
    }

    .don-image { /*Image on donation form*/
                width:50%;
                
                 margin-right:1rem;
                 margin-bottom:1rem;
    }

    .don-container input {
        width:100%;
    }

    .don-option {
        width: 46%;

    }

    .don-details {
    float: left;
    width: 100%;
    margin-top: 0rem;
}

    .don-payment {
    width: 100%;
}

    .donationFormButton {
        width:100%;
        margin-top:1rem;
    }
    .donate-heading {
        font-size: 2.5rem;
    }

}

/* ------------- Form placeholder ----------------*/

::-webkit-input-placeholder {
    color: #999;
}
:-moz-placeholder {
    color: #999;
}

::-moz-placeholder {
    color: #999;
}

input:-ms-input-placeholder {
    color: #999;
}




/* ------------------------------ Prayer Points ------------------------------------*/

 .prayer-point {
 font-size:1.6rem;
 margin-bottom: 0rem;
 text-align:center;
 color: #5091cd;
 }
 
  .prayer-point-link {
  display:none;
  visibility: hidden;
  }
 
 @media screen and (max-width:630px){/*Mobile */
 .prayer-point-mobile {
  display:none;
  visibility: hidden;

	}
	
 .prayer-point-link {
	color: #fff;
padding: 1rem;	
	background-color: #5091cd;
	display:block;
	visibility: visible;
	text-align:center;
	font-size:1.8rem;
	}
	
 .prayer-point-link a {
	color: #fff;
} 
}
 
 .prayer-item img,.navigation-image img{
width:100%;
height:auto;
padding: 1rem 0 1rem 0;

}
.prayer-item a{
-webkit-transition:opacity 0.2s linear; /* For Safari 3.1 to 6.0 */
transition: opacity 0.2s linear;
}

.prayer-item a:hover{
opacity: 0.7;
filter:Alpha(opacity=70); /* IE8 and earlier */
}




.prayer-title {
width:100%;
background-color: #fff;
color:#5091cd;
text-align:center;
margin-bottom:2rem;
}


/* ------------------------------ Map Module ------------------------------------*/

.map-infobox-container {}

.infoBox {
background-color: #f6f6f6;
padding: 1rem;

}

.map-infobox-title { /* Title */
color: #5091CD;
text-align:left;
font-size: 2.2rem;
width: 50%;
float:left;
}

.map-infobox-image { /* Image */
    float: left;
    margin-right: 1rem;
    width: 40%;
}

.map-infobox-paragraph { /* Description paragraph */
font-family: "robotoregular",sans-serif;
color: #404040;
font-size: 1.8rem; line-height:1.33;
display:none;
}


/* ------------------------------ Form Module ------------------------------------*/


.form-container { /* Contains the whole form */
background-color: #5091cd;
padding:2rem;
width:60%;
border-top: 2px #fff dotted;
color: #fff;
}

.form-container p {
color: #fff;
}

.form-section {
    margin-top:2rem;
}

.form-section-text {
    text-align:center;
    margin-top:1rem;
    margin-bottom:1rem;
    font-weight: bold;
    border-bottom: 1px dotted #fff;
    padding-bottom:1rem;
}

.form-required-field {
  font-size: 1.2rem;
}

span.form-input, input[type="checkbox"] { /* Checkbox */
  background-color: transparent;                                       
}

.form-input input[type="radio"] { /* Radio button */
                            margin-left: 0rem;
                            margin-right: 0rem;
                            
}

textarea.form-input { /* Textarea */

}

.form-input label {
    font-weight: normal;
color:#fff;
margin-left: 1rem;
}



.form-input td label {

color:#777;
}

.form-tab,.form-tab-selected {
    float: left;
    display: table;
    width: 20%;
    height: 5rem;
    margin-right: 1rem;
    background-color: #ccc;
    }

.form-tab-selected {
    background-color: #fff;
    color: #004990;
    font-weight: bold;
    position:relative;
}

.form-tab-selected:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #fff;
    border-width: 3.4rem;
    margin-top: -3.4rem;
}

.form-tab td,.form-tab-selected td {
    padding: 1rem;
}

.form-tab {color: #333;}

.form-tab:hover {


}

.form-tab:after {

}

.form-button { /* Buttons e.g. Submit */
    background-color: #004990;
    border: 0 none;
    color: #ffffff;
    /*display: block;*/
    /*float: left;*/
    margin-left: 0rem;
    margin-right: 1rem;
    margin-top: 1rem;
    margin-bottom:1rem;
    padding: 1rem 4rem;
    text-align: center;
    width: auto;
    border-radius: 3px;
}

.form-button-blue {
    background-color: #5091CD;
    padding: 1rem;
    color: #fff;
    border-radius: 5px;
    margin: 1rem 1rem 0rem 0rem;
    float: left;
    border: 3px solid #5091CD;
}

.form-button-blue:hover {
    background-color: #004990;
    border: 3px solid #004990;
    color: #fff;
}

.form-button-blue:active,.form-button-blue:focus {
    background-color: #fff;
    color: #004990;
    border: 3px solid #004990;
}

.form-button-container {    
    margin-bottom: 1rem;
    float: left;}

.form-button:hover {
background-color: #fff;
color: #004990;
}

.form-button-white,.form-button-white:focus{
    background-color: #5091CD;
    padding: 1rem 2rem;
    float: left;
    color: #fff;
    border-radius: 3px;
    border: 3px solid #5091CD!important;
    width: 100%;
    text-align: center;
}


.form-button-white:hover{
    color: #fff;
    background-color: #004990;
    border: 3px solid #004990!important;
}

.form-button-white:active{
    color: #004990;
    background-color: #fff;
    border: 3px solid #004990!important;
}


.form-container {
    background-color: #5091cd;
    border-top: 2px dotted #fff;
    color: #fff;
    padding: 2rem;
    width: 100%;
	margin-top:1rem;
	margin-bottom: 1rem;
    max-width: 750px;
}

.form-title {
    color: #fff;
    font-family: "robotoregular",sans-serif;
    font-size: 3rem;
    font-weight: 500;
    text-align: center;
    margin-top:1rem;
}

.form-field {
    clear: both;
    margin-top: 2rem;
}

.form-text {
    /*background-color: #004990;
    color: #fff;
    float: left;
    padding: 0.5rem 1.5rem;
    text-align: right;*/
    /*float: left;*/
    padding: 0.5rem 0rem;
}

.form-field div { /* Targets the div inside the form-field div*/
    /*overflow:hidden;*/
}

.form-field select {
border: 0px;
padding-top: 0.5rem;
padding-bottom: 0.3rem;	
width: 100%;
background-color: #eee;
    border: 3px solid #eee !important;
    outline: 0;
}

div.form-time {
    /*width: 50%;*/
    margin: 0 1rem;
    float: left;
}

.form-field select.form-time {
    width: auto;
    float: left;
}

.form-field textarea.form-input {
    width: 100% !important;
    min-height: 10rem;
}

.form-input {
    /*background-color: #fff;
    border: 0px solid #fff;
    color: #777;
    height: 100%;
    overflow: hidden;
    padding: 0.5rem;
    width: 100%;*/
    float: left;
   background-color: #eee;
    border: 0 solid #fff;
    padding: 0.5rem;
    width: 100%;
    border: 3px solid #eee !important;
    margin-bottom:1rem;
}

span.form-input {

    border:0px !important;
}

span.form-text {
    width: 100%;
    margin-top: 2rem;
    display: block;
}

.form-table {
    width: 100%;
    margin-top:1rem;
}

.form-table tbody tr {
    margin-bottom:2rem;
}

.form-table tbody tr td input, .form-table tbody tr td select {
	font-size: 1.8rem;
    padding:0.5rem;
    background-color: #eee;
    border: 3px solid #eee !important;
    width: 100%;
}

table.form-table td {
display: block;
width: 100%;
}

.form-table input{
 border: 0px;
}

.form-table tbody tr td input[type="button"] {

    background-color: #004990;
    border: 3px solid #004990 !important;
    color: #fff;
    width: auto;
    max-width: 50%;
    min-width: 180px;
    display:block;
    float:left;
    margin-top: 1rem;
    overflow: visible;
}


.form-table tbody tr td input[type="button"]:hover {
    background-color: #fff;
    color: #004990;
    border: 3px solid #fff !important;
}

.form-table tbody tr td:nth-child(1) span {
    width:100%;

}


.form-error {
   background-color: #eee;
    color: red;
    /*display: block;*/
    padding: 1rem;
    width: auto;
    margin-top:0.5rem;

}

.form-error {
    color: red;
    padding: 1rem;
    width: auto;
    background-color: #fff;
    border: 1px solid red;
    padding: 1rem;
    position: relative;
    display: block;
    margin: -1rem 2rem 1rem 0rem;
    font-weight: bold;
}
.form-error:after, .form-error:before {
    border: medium solid transparent;
    bottom: 100%;
    content: " ";
    height: 0;
    left: 50%;
    pointer-events: none;
    position: absolute;
    width: 0;
}
.form-error:after {
    border-color: rgba(136, 183, 213, 0) rgba(136, 183, 213, 0) #fff;
    border-width: 10px;
    margin-left: -10px;
}
.form-error:before {
    border-color: rgba(194, 225, 245, 0) rgba(194, 225, 245, 0) red;
    border-width: 11px;
    margin-left: -11px;
}

.form-validation-error,.form-validation {
   background-color: #eee;
    color: red;
    padding: 1rem;
}

.form-recaptcha #recaptcha_widget_div { /* ReCaptcha styling*/
 background-color: #fff;
}

.form-recaptcha a {
    font-size:1rem;
    color: #333 !important;
} 

.form-input:focus,.form-field select:focus,.form-table tbody tr td input:focus  {
    background-color: #fff;
    border: 3px solid #004990 !important;
    color: #000;
}

.form-checkbox {
    float: left;
    padding: 1rem;
    width: 50%;
}

.form-checkbox-container {
    float: left;
    width: 100%;
    padding: 1rem;
    margin-bottom: 1rem;
}

.form-checkbox input {
    margin: 0 2rem;
}

.form-validation-summary ul {
    background-color: #fff;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 1rem;
}

.valid-email {color: green;}

/*----------------------- Project Countries Module ---------------------------- */

.projectcountries-item {
    float: left;
/*    height: 7rem;
    margin-bottom: 3rem;*/
border: 0px #ccc solid; 
padding: 1rem; 
height: 15rem;
}

.projectcountries-item img{
 margin: 0 auto; display:block;	
 margin-bottom:1rem;
}

.projectcountries-item:hover {
opacity: 0.8;	
}

/*----------------------- Events ---------------------------- */

.events-item {
border-bottom: 1px dotted #004990;
    clear: both;
    float: left;
    width: 100%;
	margin-bottom: 1.8rem;
}

.events-title {
font-family: "Arial";
line-height: 1.08;
color: #004990;
text-align:left;
}

.events-date {
font-size: 1.2rem;
color: #999;

}

.events-location {
font-size: 1.2rem;
color: #999;

}

.events-button {
background-color: #004990; 
color: #fff;
padding: 1rem;
margin-right: 1rem;
width: 20rem;
text-align:center;
float:left;
}

.events-button:hover {
background-color: #5091cd; 
color: #fff;
}

.form-event .form-error {
    float: left;
    width: 100%;
}

/*-------------------- Related articles module ----------------- */
.related-item-container {
background-color: #e3e3e3;
width:100%;
float:left;
color: #404040;
font-weight: bold;
}

.related-projects ul {
background-color: #EFF5FB;
width:100%;
float:left;
color: #404040;
font-weight: bold;
padding-bottom:1rem;
padding-right:1rem;
margin-left: 0rem;
padding-left: 1rem;
}

.related-item {
background-color: #e3e3e3;
padding:1rem;
width: 100%;
max-width:26rem;
min-height: 5rem;
float:left;
}

.related-projects a {
color: #004990;

}

.related-projects a:hover {
color: #5091CD;

}

.related-projects li {
    margin-top:1rem;
    padding-bottom:1rem;
    border-bottom: 1px solid #5091CD;
    display: block;
    list-style:none;
    font-family: "robotoregular",sans-serif;
    margin-bottom: 0rem;
}


.related-projects li:last-child {

    border-bottom: 0px solid #5091CD;
}

@media screen and (max-width:991px) { /* Tablet Portrait and lower */
.related-item {
max-width:50%;
}
}

.related-item img {
width: 100%;
margin-left: auto;
margin-right: auto;
display:block;
margin-bottom: 1rem;
}
.related-item p {
font-weight: bold;
}

.related-title,.related-projects h3 {
    /*border-bottom: 5px solid #ccc;
    color: #777;
    font-family: "robotoregular",sans-serif;
    font-weight: bold;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    padding-top: 1rem;*/
    font-size: 1.8rem;
    font-family: "robotoregular",sans-serif;
    background-color: #777;
    color: #fff;
    padding:1rem;
    margin-bottom:0rem;
    margin-top:1rem;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
     -webkit-border-radius: 5px 5px 0 0;
      -moz-border-radius: 5px 5px 0 0;
      float: left;
    width: 100%;
}

/*----------------------------------------------------------------- */

/*--------------------- News Grid Module--------------------------- */

/*----------------------------------------------------------------- */




/* ------------------------ News Grid - NEWS PAGE ------------ */

.news-grid-container {padding: 0rem;clear:both;margin-top:1rem;overflow: hidden;}
.news-grid-container img {width:100%;}
.news-grid-container p { } 

/* Draw lines around newsgrid items */

.news-grid-container div.row:nth-child(3)
	{ 
	border-bottom: 2px solid #ccc;
	}
	.news-grid-large {
	 border-bottom: 2px solid #ccc;
	}
	
	.news-grid-medium-large:nth-child(1) {
	 border-right: 1px solid #ccc;		
	}
	
	.news-grid-small:nth-child(2),.news-grid-small:nth-child(8)  {
	border-right: 1px solid #ccc;	
	border-left: 1px solid #ccc;	
	}
	
	.news-grid-small:nth-child(1),.news-grid-small:nth-child(2),.news-grid-small:nth-child(4) {
		
		border-bottom: 2px solid #ccc; 
		
	}
	
	@media screen and (max-width:767px) { /*Only mobile*/

		.news-grid-medium-large:nth-child(1) {
			border-right: 0px solid #ccc; /*remove any previous borders */
		}
		.news-grid-medium-large {
		border-bottom: 2px solid #ccc;
		}

		.news-grid-container div.row:nth-child(3) {
			border-bottom: 0px solid #ccc; /*remove any previous borders */
		}		
		
		.news-grid-small:nth-child(1), .news-grid-small:nth-child(2), .news-grid-small:nth-child(4) {
			border-bottom: 0px solid #ccc;  /*remove any previous borders */
		}
		.news-grid-small:nth-child(2), .news-grid-small:nth-child(8) {
			border-left: 0px solid #ccc;
			border-right: 0px solid #ccc;  /*remove any previous borders */
		}		
		
	}
	
	
	
	/*End of draw lines around newsgrid items */


 .solid-line { /* creates a horizontal solid line */
    border-bottom: 2px solid #ccc;
    /*margin-top: -1rem;*/
}

/*Large item */
.news-grid-large {
float:left;
padding-bottom: 1.5rem;
/* border-bottom: 1px solid #ccc;
border-bottom: 1px dotted #5091cd;*/
}

.news-grid-large img {
width:100%;
/*margin-top: 2rem;
margin-bottom: 2rem;
margin-left:-2rem;*/

}

.news-grid-large p {
font-family: "Georgia", "Times New Roman";
font-size:2.2rem;
/*margin-left:-15px;*/
margin-top: 1rem;
}

.news-grid-large p a {
color: #555;	
}

.news-grid-large a:hover {
opacity: 0.8;	
}

/* Medium Large */
.news-grid-medium-large {
padding-top: 1.5rem;
padding-bottom: 1rem;
float:left;
/*border-bottom: 1px dotted #5091cd;*/
/*min-height: 35rem;*/
}

.news-grid-medium-large img {
width:100%;
/*margin-left:-2rem;*/
margin-bottom: 1rem;
/*max-height:260px;*/
}

.news-grid-medium-large p {
font-family: "Georgia", "Times New Roman";
font-size:1.8rem;
margin-bottom: 0rem;
/*margin-left:-15px;*/
}

.news-grid-medium-large p a {
color: #555;	
}

.news-grid-medium-large a:hover {
opacity: 0.8;	
}
/*Small item */
.news-grid-small {
	min-height:32rem;
    padding-top: 1.5rem;
    margin-bottom: -2000px;
    padding-bottom: 2000px;

}

@media screen and (min-width:993px) and (max-width:1200px) { /* Tablet landscape */
	.news-grid-small {
	min-height:35rem;
	}
}

@media screen and (min-width:768px) and (max-width:992px) { /* Tablet Portrait */
	.news-grid-small {
	min-height:35rem;
	}
}


.news-grid-small a:hover {
opacity: 0.8;	
}

.news-grid-small img {
width:100%;
margin-bottom:1rem;
/*margin-left:-2rem;*/
}

.news-grid-small p {
font-family: "Georgia", "Times New Roman";
font-size:1.8rem;
/*margin-left:-2rem;*/
}

.news-grid-small p a { 
color: #555;
}

p.news-grid-date {font-size: 1.2rem;text-align:left; color: #999;}

p.news-grid-region {font-size: 1.2rem;text-align:left; color: #999;}

.news-navigation-container {
background-color:#5091cd; /* #5091cd */
/*margin-left: -2rem;*/
width:100%;
margin-top:1rem;

}

.news-navigation-container ul{
padding: 0px;
margin-bottom: 0rem;
}

.news-navigation-container li{

display:inline;


}

.news-navigation-container li a{
color:#fff;
margin-right: 1rem;
padding: 0.5rem;
/*padding: 0.7rem 1rem;*/
font-size: 1.4rem;
font-weight: bold;
outline: 0;
width:auto;
float:left;
}

.news-navigation-container li a:hover {
background-color:#004990;	
border-bottom:#004990 1px solid;	
}

.news-navigation-container li input.search-input{
background-color: #fff;
color: #004990;
border: 0px;
width: 100%;


}

.news-navigation-container li input.search-button {

	width: 30px;
	padding:0.2rem;
	height:30px;
	float: none;
	margin-left; 0px;
}

.news-navigation-container li.selected a{
background-color: #fff;
color: #004990;
/*padding: 1rem;*/
}


.news-grid-title {font-family: "Georgia";
color: #004990;font-size: 4.2rem; letter-spacing: -0.01em;line-height: 1.08;padding-bottom: 0rem; margin: 2.4rem 0 1rem 0; text-align:center;}

.search-news { /* Class for button on news search */
	/*width:30px;*/
	background: url('/resources/search-button.png') no-repeat scroll center center / auto 1em, linear-gradient(#fff, #fff) repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-color: #fff;
    border: 0 none;
    height: 3rem;
    padding: 0;
    width: 30px;
    text-indent: -9999px;
}

.search-span {
float:right;	
}

.search-container {
overflow: hidden;
position:relative;
height: 3rem;
}

.search-news-box {
border: 1px solid #5091CD;	
}



@media screen and (max-width:767px) { /*Only mobile */
	.news-navigation-container ul li
	{
	text-align:center; 
	width:50%;
    float:left;
	}
	
	.news-navigation-container ul li a
	{
	font-size: 2rem;
	text-align:left; 
	width:100%;
	border-bottom:#004990 0px solid;	
	}

    .news-navigation-container ul li:nth-child(5) {
    width: 100%;
    }
	
	.news-navigation-container li a:hover {
	border-bottom:#004990 0px solid;		
	}
	
	.search-input {
	margin: 0;	
    font-size: 2rem;
	}
	.search-news {
	height: 3rem;	
	}
	
	
}

/* ------------------------ News Grid - HOMEPAGE ------------ */

/* Adds the grey band on the homepage */
.news-space {
background-color: #eee;
border-top: 3px solid #999999;
}


/*Large item */
.news-grid-homepage-large {

}

.news-grid-homepage-large a:hover{
	opacity: 0.8;
}

.news-grid-homepage-large:hover img {
/*-moz-opacity:0.1;
background-color:red;*/
}

.news-grid-homepage-large img {
width:100%;
margin-bottom: 1.5rem;
}

.news-grid-homepage-large p a {
font-family: "Georgia","Times New Roman";
    font-size: 3.0rem;
    margin-top: 1.5rem;
	line-height:1.08;
	color: #555;
}

/*Medium item */
.news-grid-homepage-medium {
margin-bottom: 1.5rem;
min-height: 25.5rem;
}

.news-grid-homepage-medium img{
width: 100%;
margin-bottom: 1.5rem;
}

.news-grid-homepage-medium p a{
    font-family: "Georgia","Times New Roman";
    font-size: 1.8rem;
	margin-bottom:1.5rem;
	color: #555;
}


.news-grid-homepage-medium a:hover {
opacity: 0.8;	
}

/*Small item */
.news-grid-homepage-small {
margin-bottom:1.5rem;
padding-bottom: 1.5rem;
min-height:12rem;
}

.news-grid-homepage-small img{
width: 100%;
}

.news-grid-homepage-small p {
margin-left: -1.5rem;
}

.news-grid-homepage-small p a{
    font-family: "Georgia","Times New Roman";
    font-size: 1.8rem;
	color: #555;
}


.news-grid-homepage-small a:hover {
opacity: 0.8;	
}

.line-left {
border-left: 1px solid #999;
/*min-height:65rem;*/
}

.line-left:nth-child(2),.line-left:nth-child(3) {

    margin-bottom: -2000px; /*sorts the issue with elements being different heights*/
padding-bottom: 2000px;
}

.news-space .container { /*Hides the overflow of the two columns*/
    overflow:hidden;

}

@media screen and (max-width:992px) {
    .line-left:nth-child(2), .line-left:nth-child(3) {
        margin-bottom: 0px; /*Fixes issue for different layout on tablet portrait*/
        padding-bottom: 0px;
    }
}



.line-horizontal {
border-bottom: 1px solid #999;
}


.line-horizontal:nth-child(n) {
	
}

/* ------------------------ Shop ------------------- */

.shop-image img {
    max-width: 100%;

}


.shop-image { /* Product page */
              margin-top:1rem;

}

.cart-container table.cart-side { /* Styling the side cart on /shop */
    background-color: #eee;
    border: 0px;
    font-size:1.5rem;
    width:100%;

}

    .cart-side td {
        padding:0.7rem;
    }

.cart-container {
margin-top:1rem;	
}

.cart-container table {
    width: 80%;
    float:left;
    margin-bottom:1rem;
}

.cart-headings {
    background-color: #eee;

}

    .cart-headings th {
    padding: 0.5rem 0rem;
    text-align:center;
    }

.cart-details .shopitem {
    float: none;
 border-right: 1px solid #eee;
 width: 20%;
 text-align:center;
}

.cart-details td:nth-child(2) {
    padding:0rem 1rem;
    width:20%;
}

.cart-details td:nth-child(3),.cart-details td:nth-child(4) {
    padding:0rem 1rem;
    width:12%;
}

.cart-details td:nth-child(3),.cart-details td:nth-child(4),.cart-details td:nth-child(5),.cart-details td:nth-child(6),.cart-details td:nth-child(7) {
    text-align:center;
}

tr.cart-details {
    border-bottom:1px solid #eee;

}

.cart-details .shopitem img {
    max-width: 100%;
}

.cart-details input {
    background-color: #eee;
    border: 0px;
    text-align:center;
}

.cart-details input {

}

.cart-actions {
   float: left;
    font-size: 2rem;
    font-weight: bold;
    margin-left: 2rem;
    width: 18%;
}

.cart-actions input,.cart-actions button,.cart-actions div {
    float:left;
    width:100%;
    border-radius: 0px;
}

.cart-actions div {
    text-align: left;
    float:right;
    font-size: 3rem;
    width:100%;
}






.shopitem {
background-color:#fff;
/*border-left: 1px #ededed solid;
border-right: 1px #ededed solid;
border-bottom: 1px #ededed solid;*/
float:left;
/*height: 28rem;*/
text-align:left;
padding-top:1rem;
}



@media screen and (min-width:993px) and (max-width:1200px) { /* Tablet Landscape*/

    .cart-container table {
        width:60%;
    }

    .cart-actions {
        width:30%;
    }                                                          
    .shopitem {
	/*height: 25rem;*/
	}
}

@media screen and (min-width:768px) and (max-width:992px) { /* Tablet Portrait */
	.shopitem {
	/*height: 25rem;*/
	}
    .cart-container table {
        width:100%;
    }

    .cart-actions {
        width:100%;
        margin: 0;
    }
        .cart-actions input,.cart-actions button {
            float:left;
            width: auto;
            margin-right:0.5rem;
        }
}

@media screen and (max-width:767px) {/*Mobile */
	.shopitem {
	height: auto;
	border: 0px;
	}

    .cart-actions {
        width: 100%;
        margin: 0;

    }

.cart-actions div {
    text-align: center;
    font-size: 2rem;
    width:100%;

}

    .cart-actions input, .cart-actions button, .cart-actions div {

        width:100%;
    }

.shopitem header { 
    /*breaks title if its too long*/
-ms-word-break: break-all;
     word-break: break-all;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}

}

.shopitem header {
font-weight: bold;
color: #333;
margin-bottom:1rem;
text-align:left;
font-size: 1.5rem;
}

.shopitem p {

}


.shopitem img {
max-width:100%;
margin-bottom:1rem;

}

.shopitem a:hover img {
    opacity: 0.8;
}

.normal-price {
font-size: 1.3rem;
text-align:left;
color: #777;
}

.special-price {
font-weight: bold;
font-size: 1.7rem;
text-align:left;
color: #C50000;
/*border-radius: 50%;
background-color: #C50000;
line-height: 6rem;
position:absolute;
right: 15%;
top: 25%;
width: 6rem;
height: 6rem;*/


}

.special-price-product {
	color: #C50000;
	font-weight: bold;
	font-size: 2rem;
}

/* Cart */
.cart {
background: #eee 1rem 0.5rem;
color: #333;
padding-left:1rem;
padding-right:1rem;
font-size:1.8rem;

min-height:3.5rem;
padding-top:1rem;
padding-bottom:1rem;
/*position: absolute;*/
height: auto;
max-width: 192px;
}

a .cart  {
color: #333;
 
}
a .cart:hover {
color: #5091cd;

}

/* Filter */
.shop-filter {
background-color:#fff;
border: 1px #eee solid;
color: #333;
font-size:1.3rem;
font-weight: normal;
height:auto;
padding: 0.5rem;

}



input.shop-checkbox {
margin-right:1rem;
margin-left:1.0rem;
float:left;
}

.shop-filter-header {
line-height:1.8rem;
font-size:1.3rem;
margin-top:1rem;
}

.shop-filter-text {
width:100%;
float:left;
line-height:1.8rem;
font-size:1.3rem;
padding-left:1rem;
}

.shop-filter-text a {
color: #333;
}

@media screen and (max-width:992px) {
.shop-filter-text {
width:auto;
padding-left: 2rem;	
}
}


/* The "Sort by" part */

.shop-sort  {
border: 1px #eee solid;
padding: 1rem;
}

.shop-sort p {
font-size: 1.3rem;
}

.shop-sort select {
background-color:#eee;
color: #444;
border: 1px #ccc solid;
padding: 0.5rem;
}

.shop-sort select:hover {
background-color:#e0e0e0;	
}

/* Add to cart button */
.add-to-cart {
background-color: #5091CD;
color: #fff;	
border: 0px;
padding:1rem 2rem;
background-image: ;
font-family: "robotoregular",sans-serif;
margin:0.5rem auto;
width:auto;
position:relative;
font-weight: bold;
}

.add-to-cart:hover {
background-color: #004990;
color: #fff;
}

.product-details {
	background-color: #eee;
	padding: 1rem 0;

	}
.product-details p, .product-details span{	
		font-size: 1.3rem;
		
}


/*-------------------- New Dropdown menu --------------------------*/


.home-header {
	height: 85px;
}

@media screen and (min-width:993px) and (max-width:1200px) { /* Tablet Landscape*/
	.home-header {
		height: 85px;
	}
}

@media screen and (min-width:768px) and (max-width:992px) { /* Tablet Portrait */
	.home-header {
		height: auto;
	}
}

@media screen and (max-width:767px) {/*Mobile */
	.home-header {
		height: auto;
	}
}




/* Overarching dropdown menu container */
ul.dropdown-menu-container {
/*width: 100%;*/
float: right;
margin-bottom: 0rem;
margin-top: 1rem;
}
/*
@media screen and (max-width:767px) {  Menu not displayed on mobile  - NOT NEEDED DUE TO BOOTSTRAP CLASS
ul.dropdown-menu-container {
display:none;
}
}
*/


.dropdown-menu-container {
    position: relative;
    top: 1.1rem;
}

.dropdown-menu {
position: relative;
/*top:80px;  This should be changed */
}

/* Top menu item */
li.drop { /* Top menu item list */
list-style-type: none;
position: inherit;
font-family: "robotoregular",sans-serif;
float:left;
}



a.dropdown-toggle { /* Top menu item text */
color: #004990;
    font-size: 1.6rem;
font-weight: bold;
padding-left:1.1rem;
}

@media screen and (max-width:767px) {
	li.drop  { /* Top menu item text */
	background-color:#5091CD;
	font-size:1.4rem;
	font-weight: bold;
	padding:1.1rem;
	margin:0;
	width:100%;
	color: #fff;
	text-align:center;
	border-bottom: 1px dotted #fff;
	}
	
	a.dropdown-toggle { /* Top menu item text */
	color:#fff;
	}	

    ul.dropdown-menu-container {
    width: 100%;/* Fixes issue with mobile menu not spanning full width*/

    }
}
/* caret remove dropdown for first 6 carets*/
.menu-item-1 b.caret,.menu-item-2 b.caret,.menu-item-3 b.caret,.menu-item-4 b.caret,.menu-item-5 b.caret{
	display:none; /*Temporarily removes dropdown capabilities */
}


.caret{ /* caret */
/*display:none; Temporarily removes dropdown capabilities */
width:2.5rem;
height:2.5rem;
top:0;
/*
border-left: 1px dotted #5091CD;*/
border-right: 0px;
border-top: 0px;
border-bottom: 0px;
/*  background-image:url('../resources/arrow-dropdown.png'); */

text-align:center;
}

b.dropdown-toggle:before {
content: "›";
font-weight: normal;

}

li.open b.caret:before {

color: #fff;
}


b.dropdown-toggle:hover:before {
color:#fff;
cursor:pointer;

}

b.dropdown-toggle {
	border-bottom: 1px dotted #ccc;
transform:rotate(90deg);
-ms-transform:rotate(90deg); /* IE 9 */
-webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */	
text-indent: -5px;	
}

b.dropdown-toggle:hover {
cursor:pointer;
}

.caret:before {
	
}

.caret:after {
	border-right: 1px solid #000;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;		
}




.caret:hover {
background-color:#004990;
}

a.dropdown-toggle:hover {
	background-color:transparent;
}


li.open { 
background-color:#5091CD;

color: #fff;
}



.drop {
height: 2.5rem;	

}
.drop a {
padding-right:1.1rem;
}

a.dropdown-toggle {

}

li.drop:hover {
background-color:#5091CD;
color: #fff;
border-radius: 0.5rem;
}

li.drop:hover > b.caret  {
	color: #fff;
}

li.drop:hover a {

color: #fff;
}

.menu-container { /* Used for containing the menu elements */ 
   /* margin: 0 auto;

	padding-top:1rem;*/
}

@media screen and (min-width:1200px) { /* Desktop */
/*.menu-container {width: 1170px;}*/
}

@media screen and (min-width:993px) and (max-width:1199px) { /*Tablet landscape */
/*.menu-container {width: 970px;}*/
}

@media screen and (min-width:768px) and (max-width:992px) {  /*Tablet portrait */
/*.menu-container {width: 750px;}*/
}

@media screen and (max-width:767px) { /*Mobile */
/*.menu-container {}*/

b.caret {display:none;}

li.drop {height:4rem;}
}

/* Secondary menu item */
.dropdown-menu > .menu-container > ul > li { /* Secondary menu item */
list-style-type: none;
/*width:300px;
    float: left;*/
    margin-bottom: 0rem;
margin-left:-2.5rem;
} 


.dropdown-menu > .menu-container > ul > li > a{ /* Secondary menu item text */
color:#fff;
font-size:1.4rem;


} 
.dropdown-menu > .menu-container > ul > li > a:hover{ 
color:#004990;

} 

/* Third menu item */
.dropdown-menu > .menu-container > ul > li > ul > li{ /* Secondary menu item */
list-style-type: none;
margin-left:-3rem;
padding-top:1rem;

} 

.dropdown-menu > .menu-container > ul > li > ul > li > a{ /* Secondary menu item text */
color:#fff;
font-size:1.5rem;

} 

.dropdown-menu > .menu-container > ul > li > ul > li > a:hover{
color:#004990;

} 


li.open a.dropdown-toggle {
	color:#fff;
}


/* ----------------------- Logon form --------------------------*/

td {
    /*font-size: 1.3rem;*/
}


/* ------------------------ Ways to Give ---------------------- */
.ways-to-give-button {
float:left;
width:15rem;	
margin: 0rem 0.5rem;
}

.ways-to-give-button img {
width:100%;	
margin-bottom: 0.5rem;
}

.ways-to-give-button figcaption {
margin:0rem;	
}

/* ------------------------ Petition form ---------------------- */

.form-petition {
background-color: #5091cd;
  border-top: 2px dotted #fff;
  color: #fff;
  padding: 2rem;
  width: 100%;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: block
}

.form-petition tr {

}

.recaptchatable {
  background-color: #fff !important;
  width: 100%;
}

#recaptcha_area {
margin-top: 1rem;
}

.form-petition select {
  border: 0px;
  padding-top: 0.5rem;
  padding-bottom: 0.3rem;
  width: 100%;
  background-color: #eee;
  border: 3px solid #eee !important;
  outline: 0;
    margin-bottom: 1rem;
}

.petition-validation,.petition-error {
    color: red;
  background-color: #fff;
  padding: 0.5rem;
  display: block;
  visibility: visible;
}

.petition-validation-hidden {
  visibility: hidden;
  display: none;
}

.field-title {
float: right;
  text-align: right;
  margin-right: 1rem;
}

.field-value {
font-size: 1.8rem;
  padding: 0.5rem;
  background-color: #eee;
  border: 3px solid #eee !important;
  width: 100%;
  margin-bottom: 1rem;
}

.field-value:hover {

}

.field-value:focus {
background-color: #fff;
  border: 3px solid #004990 !important;
  color: #000;
}

.field-updates > span {

}

.field-updates span {

}

.field-button {
  background-color: #004990;
  border: 0 none;
  color: #ffffff;
  margin-left: 0rem;
  margin-right: 1rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 4rem;
  text-align: center;
  width: auto;
	
}

.field-button:hover {
  background-color: #fff;
  color: #004990;
}

input[type="checkbox"] {

}

.petition-result {
      border-top: 2px dotted #fff;
color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  font-family: 'Georgia';
  background-color: #5091CD;
  padding: 2rem;
  }

/* Recaptcha responsive styling */
@media only screen and (max-width : 767px) {
    #recaptcha_challenge_image{
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    #recaptcha_response_field
    {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable #recaptcha_image {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    }
    .recaptchatable .recaptcha_r1_c1, 
    .recaptchatable .recaptcha_r3_c1, 
    .recaptchatable .recaptcha_r3_c2, 
    .recaptchatable .recaptcha_r7_c1, 
    .recaptchatable .recaptcha_r8_c1, 
    .recaptchatable .recaptcha_r3_c3, 
    .recaptchatable .recaptcha_r2_c1, 
    .recaptchatable .recaptcha_r4_c1, 
    .recaptchatable .recaptcha_r4_c2, 
    .recaptchatable .recaptcha_r4_c4, 
    .recaptchatable .recaptcha_image_cell {

    margin: 0 !important;
    width: 100% !important;
    background: none !important;
    height: auto !important;
    }

    /* Resizing image */
    table#recaptcha_table thead,table#recaptcha_table tbody,table#recaptcha_table th,table#recaptcha_table td,table#recaptcha_table tr {
    display: block;
    width: 100%;
    float: left;
    height: auto;
    }

    div#recaptcha_image {
    float: left;
    }

    #recaptcha_table > tbody > tr:nth-child(2) > td:nth-child(1) div input {
        padding: 2rem !important;
    }

    #recaptcha_table > tbody > tr:nth-child(2) > td:nth-child(1) {
    padding: 1rem !important;
    }
    #recaptcha_table > tbody > tr:nth-child(1) > td:nth-child(2),
    #recaptcha_table > tbody > tr:nth-child(1) > td:nth-child(3) {width: 50%}
}



/*------------- Top bar ----------------*/

.information-bar {
	width: 100%;
	background-color: #eee;
	height: 2rem;
	/*border-bottom: 1px solid #ccc;*/
}

.information-bar span,.information-bar p{
font-size: 1.2rem;	
float:right;
}

/* ----------- Accordions ------------*/

.panel-default {
	border-color: #fff;
	border: 0px;
}



/* ----------- Coloured boxes ------------*/

.grey-box {
    background-color: #eee;
    padding: 1rem 3rem;
    float: left;
}

/* ---------- Breadcrumbs ----------------*/

.breadcrumbs {
font-size: 1.6rem;
margin-top: 1rem;
color: #5091CD;
}

.breadcrumbs.white,.breadcrumbs.white a {

    color:#fff;
}

.breadcrumbs.white a:hover {
    text-decoration: underline;

}

/* ---------- Other ways to give ----------------*/

.other-give-container {
	background-color: #fff;
	padding:1rem;
	color: #333;
	font-weight:bold;
    border-top: 2px dotted #5091CD;
}

.other-give-title {
    border-radius: 0.5rem;
}

.other-give-title:last-child {
    margin-bottom:0rem;
}

.other-give-title,.other-give-title-donate  {
	text-align:center;
	background-color: #5091CD;
	margin-bottom:1rem;
	color:#fff;
	padding:0.5rem;
	font-weight:normal;
}

.other-give-title a, .other-give-title-donate a {
    color: #fff;

}

.other-give-title-donate {
width:100%;
}

.other-give-title:hover, .other-give-title-donate:hover {
background-color:#004990;	
}

.other-give-info {
	font-weight:normal;	
}



@media screen  and (max-width:992px) {  /*Tablet portrait */
    .other-give-container {
        float:left;
        text-align:center;
        width:100%;
        border-bottom: 1px dotted #5091CD;
        margin-bottom:1rem;
    }
    .other-give-title {
        background-color: #5091cd;
        color: #fff;
        float: left;
        font-weight: normal;
        margin-bottom: 1rem;
        margin-right: 1rem;
        padding: 0.5rem;
        text-align: center;
        border-right: 1px solid #5091cd;
        padding: 0 2rem;
        width:100%;
    }

    .other-give-title a {
        color: #fff;
    }

    .other-give-title a:hover {
        color: #fff;
    }
}


@media screen and (max-width:767px) { /*Mobile */

   /* .other-give-container {
                                      display: none;
                                      }*/
    .other-give-title {
        
        background-color: #5091CD;
        color: #fff;
        float: left;
        font-weight: normal;
        margin-bottom: 1rem;
        margin-right: 1rem;
        padding: 0.1rem;
        text-align: center;
        padding: 0 0.1rem;
        width:100%;
        /*height:6rem;*/
        border: 0px;
    }

    .other-give-title a {
        color: #fff;
    }

    .other-give-title:hover {
        color: #fff;
    }

    .other-give-title a:hover {
        color: #fff;
    }

        button.other-give-button {

        background-color: transparent;
        border: 0px;
        color: #5091CD;
        width:4rem;
        height:4rem;
        margin-left: 1rem;
        background-image: url(/themes/default/images/other-give-arrow.png);
        background-size: 4rem;
        background-repeat: no-repeat;
        transition: all 0.4s;
    }

    button.other-give-button:after {

    }


    .active .other-give-button{
-ms-transform: rotate(-180deg); /* IE 9 */
    -webkit-transform: rotate(-180deg); /* Chrome, Safari, Opera */
    transform: rotate(-180deg);
     }

}

/* Country Profile template*/

.country-image img {
    width: 100%;
    margin-bottom:1rem;
}


.country-title {
    background-color: #5091cd;
    color: #fff;
    font-family: "robotoregular",sans-serif;
    font-size: 4.2rem;
    font-weight: bold;
    letter-spacing: -0.01em;
    line-height: 1.08;
    margin: 0rem 0rem 4rem;
    padding: 2rem 0;
    text-align: left;
}

section.country-content figure { /*Used for removing images*/
display:none !important;
visibility:hidden;
}


@media screen and (max-width:767px) { /*Mobile*/

.country-image figcaption {
    margin-left: 1rem;
    margin-right: 1rem;
}

    .country-title {
        margin: 0rem;
    }
}

/* ISSUU */

.issuuembed.issuu-isrendered {

    width: 100% !important; /* Force Issuu to be responsive*/
    margin-bottom:1rem;
}

/* Staff vacancies */

.staff-vacancies li {
    /*background-color: #eee;
    color: #333;
    display: block;
    float: left;
    font-weight: bold;
    margin-bottom: 1rem;
    margin-right: 1rem;
    min-height: 10rem;
    padding: 1rem;
    width: 30%;*/
background-color: #eee;
color: #333;
display: block;
float: left;
font-weight: bold;
margin-bottom: 1rem;
margin-right: 0rem;
padding: 0rem 0rem 0rem 1rem;
min-width: 100%;


}

    .staff-vacancies li a {
line-height:3.8rem;
width:90%;
}



    .staff-vacancies li a:after {
        background-color: #5091cd;
        padding:1rem;
        margin-left: 1rem;
        color: #fff;
        height: 50%;
        float:right;
content: " + " ;
    }

        .staff-vacancies li a:hover:after {

background-color: #004990;
        }


/* CMS EDITOR*/

table.cms-editor {
    width: 100%;
    background-color: transparent;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5rem;
}

.mce-tinymce iframe {height: 600px !important;
}

.cms-editor td {
width: 100%;
display: block;
font-weight: bold;
margin-bottom: 0.5rem;
margin-top: 1rem;
}

table.cms-editor td input, table.cms-editor td select {
    width: 100% !important;
}

table.cms-editor td img#ArtImage {

    width:50%;
}

table.cms-editor ~ .tinymce, table.cms-editor ~ .mce-tinymce {
    width:100%;
    /*max-width: 600px !important;*/
    margin-left: auto;
    margin-right:auto;
    

}

table.cms-editor ~ input[value="Save"] {
    background-color: #5091CD;
    color: #fff;
    border: 0px;
    padding:1rem;
    font-weight: bold;
    min-width: 200px;
    margin-bottom:2rem;
    margin-left: auto;
    margin-right: auto;
    display:block;
    font-size: 2rem;
}

table.cms-editor ~ input[type="submit"],table.cms-editor ~ input[type="file"] {
    margin-top:1rem;
    margin-left:auto;
    margin-right: auto;
    display:block;

}


    table.cms-editor ~ input[value="Save"]:hover {
    background-color: #004990;

    } 

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 0px solid #dddddd !important;
background: #5091CD !important;
font-weight: normal !important;
color: #fff !important;
}

/* Alert message */

.alert-warning {
color: #333;
background-color: #f6e7bb;
border-color: #A0C3E4;
font-size: 1.4rem;
}
.alert {
padding: 15px;
margin-bottom: 0px;
border: 1px solid transparent;
border-radius: 0px;
}

/* No margin bottom */
.mb-none { 
margin-bottom: 0rem;
}

/* Header box */
.header-box {
color:#fff;
background-color:#004990; 
font-size: 1.6rem; 
font-family:robotoregular,arial; 
position:absolute; 
z-index: 1000; 
max-width:300px;  
top:0; left:0;
}

/* Donate bar for appeals template */
.donate-bar {
position: absolute;
    top: 0;
    width: 200px;
    left: 750px;
}



.donate-bar .donate-button-appeal-single,.donate-bar .donate-button-appeal  {
    margin: 0px;
    width: 100%;
    margin-bottom: 1rem;
}


@media screen and (min-width:992px) and (max-width:1199px) { /*Tablet landscape*/
    .donate-bar {
        left: 680px;
    }
}


@media screen and (max-width:991px) { /*Tablet portrait*/
.donate-bar {
    position: relative;
    left: 0px;
    width: 100%;
    top: auto;
}

.donate-bar .donate-button-appeal-single, .donate-bar .donate-button-appeal {
    width:40%;
    margin: 1rem 1rem;
    position: relative;
}

}
.operation-grid:nth-child(2),.operation-grid:nth-child(3),.operation-grid:nth-child(5),.operation-grid:nth-child(6) {
    /*border-right: 2px solid #eee;*/
}

.operation-grid img {
    max-width: 100%;
    margin-bottom: 2rem;
    border-radius: 50%;
}
.operation-grid p {font-family: roboto-regular, arial, sans-serif; text-align:center; font-weight: bold; color: #5091CD; margin-bottom: 2rem;}

.operation-grid:hover {opacity: 0.8;filter: Alpha(opacity=80);}

.operation-grid ~ .hidden-xs.col-sm-12.clearfix {
  /*border-bottom: 2px solid #eee;*/
  margin-bottom: 1rem;
}

@media screen and (max-width: 767px) { /*Grid on mobile*/
    .operation-grid:nth-child(3),.operation-grid:nth-child(5) {
        border: 0px;
    }
    .operation-grid:nth-child(4),.operation-grid:nth-child(6) {
    /*border-right: 2px solid #eee;*/
    }

    .operation-grid ~ .visible-xs .col-xs-12 .clearfix {
      /*border-bottom: 2px solid #eee;*/
      margin-bottom: 1rem;
    }
}

/*
 * Off Canvas
 * --------------------------------------------------
 */
@media screen and (max-width: 767px) {
  .row-offcanvas {
    position: relative;
    -webkit-transition: all .25s ease-out;
         -o-transition: all .25s ease-out;
            transition: all .25s ease-out;
  }

  .row-offcanvas-right {
    right: 0;
  }

  .row-offcanvas-left {
    left: 0;
  }

  .row-offcanvas-right
  .sidebar-offcanvas {
    right: -50%; /* 6 columns */
  }

  .row-offcanvas-left
  .sidebar-offcanvas {
    left: -50%; /* 6 columns */
  }

  .row-offcanvas-right.active {
    right: 50%; /* 6 columns */
  }

  .row-offcanvas-left.active {
    left: 50%; /* 6 columns */
  }

  .sidebar-offcanvas {
    position: absolute;
    top: 0;
    width: 50%; /* 6 columns */
  }
}

/* ECFA logo */

figure.ecfa {
    width: auto;
    float: left;
}

.ecfa img {
    width: 5rem;
    margin-right: 1rem;
}

/* eCards */
.ecards > table {width:100%; margin-bottom: 1rem;}
.ecards > table > tr {margin-bottom: 1rem;}
.ecards > table > tr > td {width:50%;}
    .ecards table tr td  img {
       max-width: 100% !important;
    width: auto;
    }
    .ecards > table a {
        font-weight: bold;
        color: #333;
        font-size: 2.4rem;
    }
    .ecards > table a:hover {text-decoration: underline;}
/*.ecards > .form-container {
    display: none;
}*/
.ecards .video-container
{
padding-bottom: 70.25%;
}

.ecards #recaptcha_area td {display:block;float:left;}

.ecards #recaptcha_privacy a {
    font-size: 0.9rem; color: #333; margin: 10px;
}

.ecards #ctl15_CardList td {
background-color: #eee;padding: 1rem;border-bottom:1rem solid #fff;
}

.ecards #ctl15_FormPanel {background-color: #5091cd;
    border-top: 2px dotted #fff;
    color: #fff;
    padding: 2rem;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
    max-width: 750px;}

.form-confirmation {
    background-color: #004990;
    color: #fff;
    padding: 2rem;
}

/* Pull outs*/
    .margin-top {
        margin-top: 2rem;
    }

    .image-float {
    float: left;
    margin-right: 1rem;
    margin-top: 2rem;

    }

/* Prayer callout */

.prayer-callout {
background-color: #e3e3e3;
    color: #333;
    line-height: 1.8;
    padding: 2rem 5rem;	
    float: left;
}

.prayer-callout li {
    margin-bottom: 1.5rem;
padding-left: 1rem;
display: list-item;
}

/* Barnabas Image Organiser */
.image-browser {font-size: 2rem; color: #999;}

/*Picture*/
img.FolderIcon {
    max-width: 100%;
    width: auto;

}

.PictureContainer {
    overflow: hidden;
}

.PictureContainer img {
    height: 12rem;
    width: auto;
}

.PictureCaption {
    height: 2rem;

}

.PictureContainer:hover .FolderIcon {
cursor:pointer;
}

.PictureContainer:hover img.FolderIcon {
    opacity: 0.8; 
}

.PictureContainer:hover img.Picture,.PictureContainer:hover .PictureCaption {

    cursor:default;
}

.Picture {margin-bottom: 1rem;}

.PictureContainer:active img.FolderIcon {
    opacity: 0.2;
}


.image-browser .PictureCaption a,div.PictureCaption {font-size: 1.2rem; color: #333; vertical-align: top; overflow: hidden;}

.image-browser .PictureCaption a:hover { color: #333; text-decoration: underline;}

.PictureContainer:hover .PictureCaption a {color: #333; text-decoration: underline;
}

.PictureContainer {margin-bottom: 2rem;}

div#SubFolderContainer {
    margin-top: 2rem;
}

/* Breadcrumbs*/
.image-browser > a {background: #eee; padding: 1rem; color: #777; margin: 0 1rem;}
.image-browser > a:hover {background: #5091CD; color: #fff;}
.image-browser > a:active {background: #333; color: #fff;}

/*Details*/
.image-browser h1 {
        text-align: left;
    margin-bottom: 4rem;
    color: #999;
    padding: 2rem 0px;
    font-size: 3rem;
    border-bottom: 2px solid #999;

}

.image-browser h1+div {    
    margin: 0 auto;
    margin-bottom: 7rem;position: relative;} 

.image-browser input#UploadImageFileButton{
    background: #004990;
    color: #fff;
    padding: 1rem;
    border: 0px;

    text-align:center;

    font-size: 2rem;
    border-radius: 5.5px;
    position: relative;
         top: 50px;
         left: 0px;
}

#CurrentImageDetailsCaptionTextBox {}

.image-browser input#ImageFileUploader {
        margin: 0 auto; 
    text-align:center;
    display:block;
     font-size: 2rem;
     position: absolute;
     top: 0;
}

.image-browser input#UploadImageFileButton:hover {
    background: #5091CD;

}
.picture-edit {position: absolute;
    top: 0;}
.picture-edit a {background: #5091CD; clear: both; color: #fff; font-size: 2rem; padding: 0.5rem 2rem; margin: 0 auto; display: block; height: 40px; width: 30px; text-align:center; border-radius: 5.5px; overflow: hidden; text-indent: -9999px;}
.picture-edit a:hover,input[value="Show details"]:hover {background: #004990;}
.picture-edit a:active {background: #333; }

.picture-edit a:after {
    content: "";
    background: url("/resources/edit-image.png") no-repeat;
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    margin: 0px;
    padding: 0;
    top: 5px;
    left: 5px;
    position: absolute;
}



input[value="Show details"] {background: #5091CD url("/resources/show-details.png") 5px no-repeat; width: 30px; height: 40px; color: #fff; font-size: 2rem; padding: 0.5rem 2rem; border: 0px; border-radius: 5.5px; position: absolute; z-index: 1; overflow: hidden; text-indent: -9999px;     right: 15px;
    top: 0;}

    input[value="Show details"]:hover { background: #004990 url("/resources/show-details.png") 5px no-repeat;
    }
/*Edit image*/
.edit-image-picture {max-width: 100%;}

.edit-image-browser input {
        background: #004990;
    color: #fff;
    padding: 1rem;
    border: 0px;
    float:left;
    text-align:center;
    clear:both;
    font-size: 2rem;
    border-radius: 5.5px;
    margin-top: 1rem;
    margin-right: 1rem;
    clear: both;
}
.edit-image-browser input:hover {
    background: #5091CD;
}

.edit-image-browser input:active {
    background: #333;
}
.edit-image-browser {
    width: 100%;
    float: left;
    margin-bottom: 1rem;
    }

.edit-image-container > div:nth-child(3) span {float: left; width: 100%;}

.edit-image-container > div:nth-child(3) span,.edit-image-container > div:nth-child(4) span {
        float: left;
    font-weight: bold;
    margin-right: 1rem;
}
.edit-image-container > div:nth-child(3) span:after,.edit-image-container > div:nth-child(4) span:after {content: ':';}

.edit-image-container > div:nth-child(3) { /* Filename */
    float:left; 
    width: 100%;
    font: normal 1.6rem robotoregular,sans-serif;
    color: #999;
    margin-bottom: 1rem;
}

.edit-image-container > div:nth-child(3) input, .edit-image-container > div:nth-child(4) #ImageFilePathTextBox {
    height: auto !important;
    border: 0px;
    color: #333;
    width: auto !important;
}

.edit-image-container > div:nth-child(3) #FileNameTextBox {text-align: right;}

.edit-image-container > div:nth-child(4) {
        float:left; 
    width: 100%;
    font: normal 1.6rem robotoregular,sans-serif;
    color: #999;
    margin-bottom: 2rem;
}

.edit-image-container > div:nth-child(4) #ImageFilePathTextBox {
    width: 100% !important;
    float: left;
}

.edit-image-buttons,.edit-image-container > div:nth-child(10) input[type="submit"],.edit-image-container > div:nth-child(8) input[type="submit"],#butRenameCancel,#butRenameConfirm  {float: left;  margin-right: 1rem; background: #5091CD; padding: 1rem; color: #fff; border: 0px; border-radius: 3.5px; margin-top: 1rem; margin-bottom: 1rem;} /* Rename cancel*/
.edit-image-buttons:hover,.edit-image-container > div:nth-child(10) input[type="submit"]:hover,.edit-image-container > div:nth-child(8) input[type="submit"]:hover,#butRenameCancel:hover,#butRenameConfirm:hover  {background: #004990;} /* Rename cancel hover*/
.edit-image-buttons:active,.edit-image-container > div:nth-child(10) input[type="submit"]:active,#butRenameCancel:active,#butRenameConfirm:active {background: #333;} /* Rename cancel active*/
#MoveFileToTextBox {float: left; margin-right: 1rem;}

img#ImagePreview {
    max-width: 100%;
}

/*Move box*/
.edit-image-container > div:nth-child(10) input:first-child {
    width: 100%;
    float: left;
    clear: both;
    padding: 1rem;
     font: bold 1.6rem robotoregular,sans-serif;
     margin-bottom: 2rem;
}
.edit-image-container > div:nth-child(10) input:nth-child(2) { /* Confirm */
     float:right;
     background: #B21F25;
     margin-bottom: 1rem;
}
.edit-image-container > div:nth-child(10) input:nth-child(2):hover { 
    opacity: 0.8;
    background: #B21F25;
}
.edit-image-container > div:nth-child(10) input:nth-child(2):active { 
    opacity: 1;    
    background: #333;

}

/* Delete */

.edit-image-container > div:nth-child(5) input:first-child {
    background: #B21F25;
    margin-bottom: 1rem;
}

.edit-image-container > div:nth-child(5) input:first-child:hover {
    opacity: 0.8;
    background: #B21F25;
}
    .edit-image-container > div:nth-child(5) input:first-child:active {
        opacity: 1;
        background: #333;
    }
.edit-image-container > div:nth-child(8) {
    width: 100%;
    float: left;

}
.edit-image-container > div:nth-child(8) input:first-child,#butRenameConfirm  {
    float: right;
    clear: both;
    background: #B21F25;
}

.edit-image-container > div:nth-child(8) input:nth-child(2) {
     float: none;
   margin-bottom: 1rem;
}

/* Rename */
.edit-image-container > div:nth-child(9) input:first-child  {
    width: 100%;
    float: left;
    clear: both;
    padding: 1rem;
     font: bold 1.6rem robotoregular,sans-serif;
     margin: 2rem 0;

}

/*Show details*/

#PanelCurrentImageDetails:before {
    content: "Image details:";
    font-weight: bold;
    width: 100%;
    text-align: center;
    padding-bottom: 1rem;
    float: left;
}
/*
#PanelCurrentImageDetails:before {
    content: "Close [X]";
    font-weight: bold;
    width: 100%;
    clear: both;
    float: right;
    text-align: right;
    margin-bottom: 1rem;
}*/
#PanelCurrentImageDetails:before:hover {
    color: #5091CD;

} 

#PanelCurrentImageDetails {background: #eee; padding: 2rem 1rem; margin-bottom: 2rem;}

    #PanelCurrentImageDetails #CurrentImageDetailsTextBox, #CurrentImageDetailsCaptionTextBox {
        float: left;
        width: 100%;
        padding: 1rem;
            border: 0px;
            margin-bottom: 1rem;
            font: normal 2rem arial,sans-serif;
            color: #999;
            cursor:text;
    }

        #PanelCurrentImageDetails #CurrentImageDetailsTextBox:hover {
            color: #5091CD;
        }

    #PanelCurrentImageDetails #CurrentImageDetailsTextBox + input {
        float: left; width: 100%;
        background: #5091CD;
        border: 0px;
        color: #fff;
        padding: 1rem;
        margin-bottom: 1rem;
        clear:both;
    }

        #PanelCurrentImageDetails #CurrentImageDetailsTextBox + input:hover {
            background: #004990;
        }

         #PanelCurrentImageDetails #CurrentImageDetailsTextBox + input:active {
            background: #333;
        }

        #PanelCurrentImageDetails {
            position: fixed;
            top: 50%;
            background: #eee;
            width: 500px;
            left: 50%;
            z-index: 200;
            margin-left: -250px;
            height: 350px;
            margin-top: -175px;
            -webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
            -moz-animation: fadein 0.5s; /* Firefox < 16 */
            -ms-animation: fadein 0.5s; /* Internet Explorer */
            -o-animation: fadein 0.5s; /* Opera < 12.1 */
            animation: fadein 0.5s;
            box-shadow: 5px 5px 2px #ccc;
        }

        #PanelCurrentImageDetails span { /* Image audience */
            width: 50%;
            float:left;
            text-align:right;
            padding-right: 1rem;
        }
        #PanelCurrentImageDetails span ~ select { /* Audience select */
            width: 50%;
            float:left;
            text-align:left;
            padding-left: 1rem;
            margin-bottom: 1rem;
        }

        span#lblCurrentImageDetailsCaption { /* Caption */
        width: 100%;
        float:left;
        text-align: center;
        margin-bottom: 1rem;
        }
        span#lblCurrentImageDetailsCaption:after {
            content: ':';
        }
        #PanelCurrentImageDetails select#dlCurrentImageDetailsCaption {/* Caption select */
    width: 100%;
    float:left;
    
        }

        @keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}



.close {background: #5091CD;
    color: #fff;
    opacity: 1;
    text-shadow: none;
    padding: 1rem;}

.close:hover {background: #004990;
    color: #fff;
    opacity: 1;
    text-shadow: none;
}

    .close:active {
        background: #333;
    }

    /* Upload image */
    span#lblImageInfo {
    font-weight: bold;
    text-align: center;
    float: left;
    width: 100%;
    margin-bottom: 1rem;
}
    #lblImagePath {    width: 100%;
    float: left;
    margin-bottom: 2rem;}
    #lblImageAudience,#lblImageTitle,#lblImageCaption,#lblImageAltText,#lblImageUrl,#lblImageUserName,#lblImageUserUrl,
    #lblImageUserUrl,#lblImageLicenseName,#lblImageLicenseUrl {padding-right: 1rem; width: 40%;
    float: left;
    text-align: right;clear: both;}

   #dlAudience,#tbImageCaption,#tbImageTitle,#tbImageAltText,#tbImageUrl,#tbImageUserName,#tbImageUserUrl,#tbImageLicenseName,#tbImageLicenseUrl {     float: left;
    width: 60%;
    margin-bottom: 1rem;
    color: #333;
    }

      #UpdateImageDatabaseButton {
    background: #004990;
    color: #fff;
    padding: 1rem;
    border: 0px;
    text-align: center;
    font-size: 2rem;
    border-radius: 5.5px;
    margin: 4rem auto;
    display: block;
   }

   #UpdateImageDatabaseButton:hover {background: #5091CD;}

   .image-browser > div:nth-child(3) {background: #5091CD; color: #fff; margin-bottom: 2rem;}