/************************************************************************************
Responsive skeleton and stylesheets from http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
*************************************************************************************/

/************************************************************************************
RESET
*************************************************************************************/
html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
	margin: 0;
	padding: 0;
}

img, fieldset {
	border: 0;
}

/* set image max width to 100% */
img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

/* set html5 elements to block */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

.legendHide {
	display: none;
}

.tempskip {
	display: none;
}

/************************************************************************************
GENERAL STYLING
*************************************************************************************/
body {
	background: rgb(255,255,255) !important;
	font: .81em/150% Helvetica, Arial, sans-serif !important;
	color: #222;
	margin-bottom: 40px;
}
a {
	color: #026acb;
	text-decoration: none;
	outline: none;
}
a:hover {
	text-decoration: underline;
}
p {
	margin: 0 0 1.2em;
	padding: 0;
	line-height: 1.5em !important;
	font-size: 1.1em;
}
#sec-nav ul {
	margin: 0 !important;
}
#main-nav ul {
	margin: 0 !important;
}
#toplevelnav ul {
	margin: 0 !important;
}

li.current {
	font-weight: normal !important;
}
li.sub_menu_indent_1 {
	margin-left: 7% !important;
}
li.sub_menu_indent_2 {
	margin-left: 7% !important;
}
li.sub_menu_indent_3 {
	margin-left: 7% !important;
}
li.sub_menu_indent_4 {
	margin-left: 7% !important;
}
li.sub_menu_indent_5 {
	margin-left: 7% !important;
}
li.sub_menu_indent_6 {
	margin-left: 7% !important;
}

/* list */
ul, ol {
	margin: 1em 0 1.4em 24px;
	padding: 0;
	line-height: 140%;
}
li {
	margin: 0 0 .5em 0;
	padding: 0;
}

/* headings */
h2, h3, h4, h5, h6 {
	line-height: 1.4em;
	color: #008448 !important;
}
h1 {
	font-size: 1.6em;
	line-height: 1.4em;
	color: #007601 !important;
}
h2 {
	font-size: 1.4em;
}
h3 {
	font-size: 1.1em;
}
h4 {
	font-size: 1em;
}
h5 {
	font-size: 1em;
}
h6 {
	font-size: 1em;
}

.post {
	padding: 10px;
}

.post p {
	margin: 0;
}

/* reset webkit search input styles */
input[type=search] {
	-webkit-appearance: none;
	outline: none;
}
input[type="search"]::-webkit-search-decoration, 
input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

/* Bits and bobs */

.registered_yet_title {
	background-color: #cde8fd !important;
}

/************************************************************************************
STRUCTURE
*************************************************************************************/
#pagewrap {
	width: 980px;
	margin: 10px auto;
}

.centred {
	text-align: center;
}

.seventh {
	width: 130px;
	padding: 5px;
	float: left;
}

.eighth {
	width: 110px;
	padding: 5px;
	float: left;
}

.half {
	width: 440px;
	padding: 5px;
	float: left;
}

.quarter {
	width: 220px;
	padding: 5px;
	float: left;
}

.launchlight {
	cursor: pointer;
}

#lightbox {
	padding: 5px;
}

/************************************************************************************
Sitewide banner
*************************************************************************************/
#sitewide-banner {
/* margin-right: 9px; TJF - 24/09/2014 */
margin-bottom: 10px;
/* width: 100%; TJF - 24/09/2014 */
/* float: left; TJF - 24/09/2014 */
border: 2px solid #f00;
background: #fdd;
color: #000;
font-size: 1.2em;
}

#sitewide-banner h2 {
	display: none;
}

/************************************************************************************
HEADER
*************************************************************************************/
#header {
	width: 100%;
	float: left;}

/* searchform */
#search-wrapper {
	float: right;
	padding: 5px;
}
#searchform {
/*	position: absolute; 
	right: 10px;
	bottom: 6px;
	z-index: 100; */
}
#searchform #s {
	width: 150px;
	background: #fff;
	border: none;
	padding: 6px 10px;
	vertical-align: text-bottom;
	/* border radius */
	-webkit-border-radius: 0 0 0 5px;
	-moz-border-radius: 0 0 0 5px;
	border-radius: 0 0 0 5px;
	/* box shadow */
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
	/* transition */
	-webkit-transition: width .7s;
	-moz-transition: width .7s;
	transition: width .7s;
}

.site-heading {
	display: none;
}

/* site logo */
#site-logo {
	width: 100%;
	float: left;
}

#masthead {
	background-image: url('/cs/assets/images/Welcome_Banner.png');
	background-repeat: no-repeat;
	height: 50px !important;
}
#masthead a:link {
/*	background-image: url('/cs/assets/images/Welcome_Banner.png') !important; */
}
#masthead a:hover {
/*	background-image: url('/cs/assets/images/Welcome_Banner.png') !important; */
}
#masthead img:hover {
	background-image: url('/cs/assets/images/Welcome_Banner.png') !important;
}

/************************************************************************************
MAIN NAVIGATION
*************************************************************************************/

#navbar-wrapper {
	width: 100%;
	float: left;
	/* gradient */
	/* TJF 24/09/2014 - changed image path to true location */
	background: #ccc;
	background: #6a6a6a url(/cs/assets/images/nav-bar-bg.png) repeat-x;
	background: -webkit-gradient(linear, left top, left bottom, from(#999696), to(#363636));
	background: -moz-linear-gradient(top,  #999696,  #363636);
	background: linear-gradient(-90deg, #999696, #363636);
	/* rounded corner */
	-webkit-border-radius: 0 0 0 12px;
	-moz-border-radius: 0 0 0 12px;
	border-radius: 0 0 0 12px;
	/* box shadow */
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}

#main-nav {
	margin: 0;
	padding-left: 0;
}
#main-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	position: relative;
}
#main-nav li:first-child {
	margin-left: 10px;
}
#main-nav a {
	line-height: 100%;
	font-weight: bold;
	color: #fff;
	display: block;
	padding: 14px 15px;
	text-decoration: none;
	text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
#main-nav a:hover {
	color: #fff;
	background: #474747;
	/* gradient */
	background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
	background: -moz-linear-gradient(top,  #282828,  #4f4f4f);
	background: linear-gradient(-90deg, #282828, #4f4f4f);
}

/************************************************************************************
A to Z
*************************************************************************************/

#atoztop {
	width: 100%;
	float: left;
	margin-top: 10px;
	/* gradient */
	/* TJF 24/09/2014 - changed image path to true location */
	background: #6a6a6a url(/cs/assets/images/nav-bar-bg.png) repeat-x;
	background: -webkit-gradient(linear, left top, left bottom, from(#999696), to(#363636));
	background: -moz-linear-gradient(top,  #999696,  #363636);
	background: linear-gradient(-90deg, #999696, #363636);
	/* rounded corner */
	-webkit-border-radius: 0 0 0 12px;
	-moz-border-radius: 0 0 0 12px;
	border-radius: 0 0 0 12px;
	/* box shadow */
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}
#atoztop li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	position: relative;
}
#atoztop li:first-child {
	margin-left: 10px;
}
#atoztop a {
	line-height: 100%;
	font-weight: bold;
	color: #fff;
	display: block;
	padding: 10px 10px;
	text-decoration: none;
	text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
#atoztop a:hover {
	color: #fff;
	background: #474747;
	/* gradient */
	background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
	background: -moz-linear-gradient(top,  #282828,  #4f4f4f);
	background: linear-gradient(-90deg, #282828, #4f4f4f);
}

#atozbottom {
	width: 100%;
	float: left;
	margin-top: 10px;
	/* gradient */
	/* TJF 24/09/2014 - changed image path to true location */
	background: #6a6a6a url(/cs/assets/images/nav-bar-bg.png) repeat-x;
	background: -webkit-gradient(linear, left top, left bottom, from(#363636), to(#363636));
	background: -moz-linear-gradient(top,  #363636,  #363636);
	background: linear-gradient(-90deg, #363636, #363636);
	/* rounded corner */
	-webkit-border-radius: 0 0 0 12px;
	-moz-border-radius: 0 0 0 12px;
	border-radius: 0 0 0 12px;
	/* box shadow */
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 1px rgba(0,0,0,.4);
}
#atozbottom li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	position: relative;
}
#atozbottom li:first-child {
	margin-left: 10px;
}
#atozbottom a {
	line-height: 100%;
	font-weight: bold;
	color: #fff;
	display: block;
	padding: 10px 10px;
	text-decoration: none;
	text-shadow: 0 -1px 0 rgba(0,0,0,.5);
}
#atozbottom a:hover {
	color: #fff;
	background: #474747;
	/* gradient */
	background: -webkit-gradient(linear, left top, left bottom, from(#282828), to(#4f4f4f));
	background: -moz-linear-gradient(top,  #282828,  #4f4f4f);
	background: linear-gradient(-90deg, #282828, #4f4f4f);
}

/************************************************************************************
Blocks
*************************************************************************************/

.blocks {
	background: #fff;
	margin: 10px 0 0 0;
	/* rounded corner */
	-webkit-border-radius: 0 0 0 12px;
	-moz-border-radius: 0 0 0 12px;
	border-radius: 0 0 0 12px;
	/* box shadow */
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

/************************************************************************************
Quick links
*************************************************************************************/
/* TJF 24/09/2014 changed from quicklinks to tasklinks to avoid clash with legacy rules */
#tasklinks {
	width: 100%;
	float: left;
}
#tasklinks h2 {
	padding-bottom: 15px;
}

/************************************************************************************
Info links
*************************************************************************************/
#infolinks {
	width: 100%;
	float: left;
}
#infolinks h2 {
	padding-bottom: 15px;
}
#infolinks h3 {
	font-size: 1em;
	font-weight: bold;
	line-height: 1em;
}

/************************************************************************************
Adverts
*************************************************************************************/
#adverts {
	width: 100%;
	float: left;
	background: #fff; /* #696969; */
}

#adverts h2 {
	display: none;
}

#adverts p {
	text-align: center;
	font-size: 0.9em;
	font-weight: normal;
	margin-bottom: 0em;
	color: #696969; /* #fff; */
}

#advertising {
	text-align: center !important;
	margin: auto !important;
	width: 728px;
}

/************************************************************************************
General information
*************************************************************************************/
#general-info {
	margin-right: 9px;
	width: 100%;
	float: left;
	color: #000;
}

#general-info h2 {
	display: none;
}

/************************************************************************************
Campaigns
*************************************************************************************/
#campaigns {
	margin-right: 9px;
	width: 100%;
	float: left;
	height: 330px;  /* TJF 24/09/2014 */
}

#campaigns h2 {
	display: none;
}

/************************************************************************************
Connecting wall
*************************************************************************************/
#connectingwall {
}
#connectingwall ul {
	list-style-type: none;
}
#connectingwall li {
	border-bottom: 1px solid rgb(199, 199, 199);
	margin-right: 25px;
}

#wall1 {
	margin-right: 9px;
	min-height: 21em;
	width: 32.5%;
	float: left;
}

#wall1 h2 {
	font-size: 1em;
}

#wall2 {
	margin-right: 9px;
	min-height: 21em;
	width: 32.5%;
	float: left;
}

#wall2 h2 {
	font-size: 1em;
}

#wall3 {
	min-height: 21em;
	width: 33%;
	float: left;
}

#wall3 h2 {
	font-size: 1em;
}

/************************************************************************************
FOOTER
*************************************************************************************/
#az-home-mobile {
	background: #111;
	padding: 5px;
	display: none;
}

#footer {
	clear: both;
	color: #333;
}

#footercolumns {
	clear: both;
	margin-top: 10px;
}

#socialmedia {
	margin-right: 9px;
	width: 24%;
	min-height: 13em;
	float: left;
}

#socialmedia h2 {
	display: none;
}

#address {
	margin-right: 9px;
	width: 24.5%;
	min-height: 13em;
	float: left;
}

#address h2 {
	display: none;
}

#about {
	margin-right: 9px;
	width: 24.5%;
	min-height: 13em;
	float: left;
}

#about h2 {
	display: none;
}

#logo {
	width: 24%;
	min-height: 13em;
	float: left;
}

#logo h2 {
	display: none;
}

#bottom-shim {
	height: 190px;
	background-color: rgb(255, 255, 255); 
}

/************************************************************************************
CLEARFIX
*************************************************************************************/
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
.clearfix { display: block; zoom: 1; }

/************************************************************************************
selectnav.js styles
*************************************************************************************/

/* default style */
.selectnav { display: none; }

/* small screen */
@media screen and (max-width: 650px) {
  .js #main-nav { display: none; }
  .js #sec-nav { display: none; } 
    .js .selectnav { display: block; width: 98%; height: 30px; background: #eef; border: 2px solid #aaf; font-weight: bold; margin: 5px auto;}
}

/************************************************************************************
Main site styles
*************************************************************************************/

#wrapper {
	margin-top: 55px !important;
	margin-left: 0px !important;
	width: 100% !important;
}
#breadcrumb {
	height: 25px !important;
	background: #339179 !important;
	color: #fff !important;
}
#breadcrumb ul {
	margin: 5px !important;
}
#breadcrumb a {
	color: #fff !important;
}
.secondarynav {
	background: rgb(229, 240, 232) !important;
}
#sec-nav ul {
	margin: 0px !important;
}

/************************************************************************************
Customer First improvements
*************************************************************************************/

input.service_guidance_button {
background-image: url(http://www.birmingham.gov.uk/cs/Satellite?blobcol=urldata&blobkey=id&blobnocache=false&blobtable=MungoBlobs&blobwhere=1223568890444&ssbinary=true) !important;
background-repeat: no-repeat !important;
background-color: #4B8AFF !important;
color: #fff !important;
font-weight: bold !important;
font-size: larger !important;
height: 35px !important;
border-radius: 0 0 0 12px !important;
margin-right: 10px !important;
width: 92% !important;
cursor: pointer !important;
box-shadow: 5px 5px 10px -2px rgba(163, 163, 163, 1) !important;
padding-left: 60px !important;
text-align: left !important;
}

.resetPassword_align1 {
	font-size: large;
	line-height: 1.5em;
}

/************************************************************************************
Content onion templates
*************************************************************************************/

.summary {
border: 2px solid #004E8D;
border-radius: 0 0 0 12px;
background: #E4E4E4;
padding: 12px;
}

.keyfact {
	font-size: large;
	color: #000;
}

.calltoaction {
display: block;
background-image: url(http://www.birmingham.gov.uk/cs/Satellite?blobcol=urldata&blobkey=id&blobnocache=false&blobtable=MungoBlobs&blobwhere=1223568890444&ssbinary=true) !important;
background-repeat: no-repeat !important;
background-color: #4B8AFF !important;
border: 1px solid #6367FF;
border-right: 2px solid #6367FF;
border-bottom: 2px solid #6367FF;
color: #fff !important;
font-weight: bold !important;
font-size: larger !important;
height: 35px !important;
border-radius: 0 0 0 12px !important;
margin-right: 10px !important;
width: 92% !important;
cursor: pointer !important;
box-shadow: 5px 5px 10px -2px rgba(163, 163, 163, 1) !important;
padding-left: 60px !important;
text-align: left !important;
}

/************************************************************************************
Show/hide classes
*************************************************************************************/

.hidden {
	display: none;
}
.shown {
	display: initial;
}

/************************************************************************************
Sidebars overspilling main page frame
*************************************************************************************/

.left-scrolling {
    width: 140px;
    left: 10px;
    top: 17px;
    position: absolute;
    border: 2px solid navy;
    padding: 7px;
    border-radius: 0 0 0 12px;
    background-color: white;
}

.right-scrolling {
    width: 140px;
    right: 10px;
    top: 17px;
    position: absolute;
    border: 2px solid navy;
    padding: 7px;
    border-radius: 0 0 0 12px;
    background-color: white;
}

.left-floating {
    width: 140px;
    left: 10px;
    top: 17px;
    position: fixed;
    border: 2px solid navy;
    padding: 7px;
    border-radius: 0 0 0 12px;
    background-color: white;
}

.right-floating {
    width: 140px;
    right: 10px;
    top: 17px;
    position: fixed;
    border: 2px solid navy;
    padding: 7px;
    border-radius: 0 0 0 12px;
    background-color: white;
}

/************************************************************************************
Tabbed content
*************************************************************************************/

/* $Id: example.css,v 1.5 2006/03/27 02:44:36 pat Exp $ */

/*--------------------------------------------------
  REQUIRED to hide the non-active tab content.
  But do not hide them in the print stylesheet!
  --------------------------------------------------*/
.tabberlive .tabbertabhide {
 display:none;
}

/*--------------------------------------------------
  .tabber = before the tabber interface is set up
  .tabberlive = after the tabber interface is set up
  --------------------------------------------------*/
.tabber {
}
.tabberlive {
 margin-top:1em;
}

/*--------------------------------------------------
  ul.tabbernav = the tab navigation list
  li.tabberactive = the active tab
  --------------------------------------------------*/
ul.tabbernav
{
 margin:0;
 padding: 3px 0;
 border-bottom: 1px solid #778;
 font: bold 13px Helvetica, Arial, sans-serif;
}

ul.tabbernav li
{
 list-style: none;
 margin: 0;
 display: inline;
}

ul.tabbernav li a
{
 padding: 3px 0.5em;
 margin-left: 3px;
 border: 1px solid #778;
 border-bottom: none;
 background: #788efc;
 text-decoration: none;
}

ul.tabbernav li a:link { color: #fff; }
ul.tabbernav li a:visited { color: #fff; }

ul.tabbernav li a:hover
{
 color: #000;
 background: #AAE;
 border-color: #227;
}

ul.tabbernav li.tabberactive a
{
 background-color: #fff;
 border-bottom: 1px solid #fff;
 color: #4c66e7;
}

ul.tabbernav li.tabberactive a:hover
{
 color: #788efc;
 background: white;
 border-bottom: 1px solid white;
}

/*--------------------------------------------------
  .tabbertab = the tab content
  Add style only after the tabber interface is set up (.tabberlive)
  --------------------------------------------------*/
.tabberlive .tabbertab {
 padding:5px;
 border:1px solid #aaa;
 border-top:0;

 /* If you don't want the tab size changing whenever a tab is changed
    you can set a fixed height */

 /* height:200px; */

 /* If you set a fix height set overflow to auto and you will get a
    scrollbar when necessary */

 /* overflow:auto; */
}

/* If desired, hide the heading since a heading is provided by the tab */
.tabberlive .tabbertab h2 {
 display:none;
}
.tabberlive .tabbertab h3 {
 display:none;
}

/* Example of using an ID to set different styles for the tabs on the page */
.tabberlive#tab1 {
}
.tabberlive#tab2 {
}
.tabberlive#tab2 .tabbertab {
 height:200px;
 overflow:auto;
}

/************************************************************************************
Scrolling news ticker
*************************************************************************************/
/* liScroll styles */

.tickercontainer { 
background: #1B4E77; 
overflow: hidden;
padding: 10px; 
font-weight: bold;
color: #fff;
}
.tickercontainer .mask { 
position: relative;
left: 10px;
width: 99%;
overflow: hidden;
}
ul.newsticker {
position: relative;
left: 100%;
list-style-type: none;
margin: 0;
}
ul.newsticker li {
float: left;
}
ul.newsticker a {
white-space: nowrap;
} 
ul.newsticker span {
} 

/************************************************************************************
Magnific pop-up styles
*************************************************************************************/

/* Magnific Popup CSS */
.mfp-bg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1042;
  overflow: hidden;
  position: fixed;
  background: #0b0b0b;
  opacity: 0.8;
  filter: alpha(opacity=80); }

.mfp-wrap {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1043;
  position: fixed;
  outline: none !important;
  -webkit-backface-visibility: hidden; }

.mfp-container {
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  padding: 0 8px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.mfp-container:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle; }

.mfp-align-top .mfp-container:before {
  display: none; }

.mfp-content {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  text-align: left;
  z-index: 1045; }

.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
  width: 100%;
  cursor: auto; }

.mfp-ajax-cur {
  cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
  cursor: -moz-zoom-out;
  cursor: -webkit-zoom-out;
  cursor: zoom-out; }

.mfp-zoom {
  cursor: pointer;
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
  cursor: auto; }

.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none; }

.mfp-loading.mfp-figure {
  display: none; }

.mfp-hide {
  display: none !important; }

.mfp-preloader {
  color: #CCC;
  position: absolute;
  top: 50%;
  width: auto;
  text-align: center;
  margin-top: -0.8em;
  left: 8px;
  right: 8px;
  z-index: 1044; }
  .mfp-preloader a {
    color: #CCC; }
    .mfp-preloader a:hover {
      color: #FFF; }

.mfp-s-ready .mfp-preloader {
  display: none; }

.mfp-s-error .mfp-content {
  display: none; }

button.mfp-close,
button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  -webkit-box-shadow: none;
  box-shadow: none; }

button::-moz-focus-inner {
  padding: 0;
  border: 0; }

.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  filter: alpha(opacity=65);
  padding: 0 0 18px 10px;
  color: #FFF;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace; }
  .mfp-close:hover,
  .mfp-close:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-close:active {
    top: 1px; }

.mfp-close-btn-in .mfp-close {
  color: #333; }

.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
  color: #FFF;
  right: -6px;
  text-align: right;
  padding-right: 6px;
  width: 100%; }

.mfp-counter {
  position: absolute;
  top: 0;
  right: 0;
  color: #CCC;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap; }

.mfp-arrow {
  position: absolute;
  opacity: 0.65;
  filter: alpha(opacity=65);
  margin: 0;
  top: 50%;
  margin-top: -55px;
  padding: 0;
  width: 90px;
  height: 110px;
  -webkit-tap-highlight-color: transparent; }
  .mfp-arrow:active {
    margin-top: -54px; }
  .mfp-arrow:hover,
  .mfp-arrow:focus {
    opacity: 1;
    filter: alpha(opacity=100); }
  .mfp-arrow:before,
  .mfp-arrow:after,
  .mfp-arrow .mfp-b,
  .mfp-arrow .mfp-a {
    content: '';
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    margin-top: 35px;
    margin-left: 35px;
    border: medium inset transparent; }
  .mfp-arrow:after,
  .mfp-arrow .mfp-a {
    border-top-width: 13px;
    border-bottom-width: 13px;
    top: 8px; }
  .mfp-arrow:before,
  .mfp-arrow .mfp-b {
    border-top-width: 21px;
    border-bottom-width: 21px;
    opacity: 0.7; }

.mfp-arrow-left {
  left: 0; }
  .mfp-arrow-left:after,
  .mfp-arrow-left .mfp-a {
    border-right: 17px solid #FFF;
    margin-left: 31px; }
  .mfp-arrow-left:before,
  .mfp-arrow-left .mfp-b {
    margin-left: 25px;
    border-right: 27px solid #3F3F3F; }

.mfp-arrow-right {
  right: 0; }
  .mfp-arrow-right:after,
  .mfp-arrow-right .mfp-a {
    border-left: 17px solid #FFF;
    margin-left: 39px; }
  .mfp-arrow-right:before,
  .mfp-arrow-right .mfp-b {
    border-left: 27px solid #3F3F3F; }

.mfp-iframe-holder {
  padding-top: 40px;
  padding-bottom: 40px; }
  .mfp-iframe-holder .mfp-content {
    line-height: 0;
    width: 100%;
    max-width: 900px; }
  .mfp-iframe-holder .mfp-close {
    top: -40px; }

.mfp-iframe-scaler {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-top: 56.25%; }
  .mfp-iframe-scaler iframe {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #000; }

/* Main image in popup */
img.mfp-img {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  line-height: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 40px 0 40px;
  margin: 0 auto; }

/* The shadow behind the image */
.mfp-figure {
  line-height: 0; }
  .mfp-figure:after {
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: #444; }
  .mfp-figure small {
    color: #BDBDBD;
    display: block;
    font-size: 12px;
    line-height: 14px; }
  .mfp-figure figure {
    margin: 0; }

.mfp-bottom-bar {
  margin-top: -36px;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  cursor: auto; }

.mfp-title {
  text-align: left;
  line-height: 18px;
  color: #F3F3F3;
  word-wrap: break-word;
  padding-right: 36px; }

.mfp-image-holder .mfp-content {
  max-width: 100%; }

.mfp-gallery .mfp-image-holder .mfp-figure {
  cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  /**
       * Remove all paddings around the image on small screen
       */
  .mfp-img-mobile .mfp-image-holder {
    padding-left: 0;
    padding-right: 0; }
  .mfp-img-mobile img.mfp-img {
    padding: 0; }
  .mfp-img-mobile .mfp-figure:after {
    top: 0;
    bottom: 0; }
  .mfp-img-mobile .mfp-figure small {
    display: inline;
    margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar {
    background: rgba(0, 0, 0, 0.6);
    bottom: 0;
    margin: 0;
    top: auto;
    padding: 3px 5px;
    position: fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box; }
    .mfp-img-mobile .mfp-bottom-bar:empty {
      padding: 0; }
  .mfp-img-mobile .mfp-counter {
    right: 5px;
    top: 3px; }
  .mfp-img-mobile .mfp-close {
    top: 0;
    right: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    background: rgba(0, 0, 0, 0.6);
    position: fixed;
    text-align: center;
    padding: 0; } }

@media all and (max-width: 900px) {
  .mfp-arrow {
    -webkit-transform: scale(0.75);
    transform: scale(0.75); }
  .mfp-arrow-left {
    -webkit-transform-origin: 0;
    transform-origin: 0; }
  .mfp-arrow-right {
    -webkit-transform-origin: 100%;
    transform-origin: 100%; }
  .mfp-container {
    padding-left: 6px;
    padding-right: 6px; } }

.mfp-ie7 .mfp-img {
  padding: 0; }

.mfp-ie7 .mfp-bottom-bar {
  width: 600px;
  left: 50%;
  margin-left: -300px;
  margin-top: 5px;
  padding-bottom: 5px; }

.mfp-ie7 .mfp-container {
  padding: 0; }

.mfp-ie7 .mfp-content {
  padding-top: 44px; }

.mfp-ie7 .mfp-close {
  top: 0;
  right: 0;
  padding-top: 0; }