/**
 * The Electoral Commission
 * Main CSS
 *
 * version: 0.0.2
 * file:    main.css
 * author:  Michał Prażuch
 * Updated: megki soula - added accessibility features
 *
 */

/*
 * Table of Contents
 *
 * 1. Boilerplate Styles
 * 2. Commons
 * 3. Desktop
 *  3.1 Header
 *   3.1.1 Top navigation
 *   3.1.2 Logo container
 *   3.1.4 Main navigation
 *   3.1.5 Cookie bar
 *  3.2 Boxes 
 *  3.3 News
 *  3.4 Links
 *  3.5 Focus on
 *  3.6 Left column
 *   3.6.1 Left navigation
 *   3.6.2 Related links
 *  3.7 Body container 
 *   3.7.1 Breadcrumb 
 *   3.7.2 Page intro 
 *   3.7.3 Latest updates 
 *   3.7.4 Landing page links
 *   3.7.5 Attachment list
 *   3.7.6 Body search box
 *   3.7.7 Body search dropdown
 *   3.7.8 Body search results
 *   3.7.9 Pagination
 *   3.7.10 Contact form
 *   3.7.11 Guidance 
 *   3.7.12 Sitemap 
 *   3.7.13 EU Referendums
 *  3.8 Footer
 *   3.8.1 Footer navigation
 *   3.8.2 Social media
 *   3.8.3 Footer bottom line
 * 4. Tablet Portrait Mode
 *  4.1 Header
 *   4.1.1 Top navigation
 *   4.1.2 Logo container
 *   4.1.3 Search box 
 *   4.1.4 Main navigation
 *  4.2 Boxes 
 *  4.3 News
 *  4.4 Links
 *  4.5 Focus on
 *  4.6 Left navigation
 *  4.7 Body container 
 *   4.7.1 Latest updates 
 *  4.8 Footer
 *   4.8.1 Footer navigation
 *   4.8.2 Footer bottom line
 * 5. Phones
 *  5.1 Header 
 *   5.1.1 Top navigation 
 *   5.1.2 Logo container 
 *   5.1.3 Search box 
 *   5.1.4 Main navigation 
 *  5.2 Boxes 
 *  5.3 News 
 *  5.4 Links 
 *  5.5 Focus on 
 *  5.6 Body container 
 *   5.6.1 Landing page links
 *   5.6.2 Body search dropdown
 *   5.6.3 Pagination
 *   5.6.4 Guidance box 
 *  5.7 Footer
 *   5.7.1 Footer navigation
 *   5.7.2 Social media
 *   5.7.3 Footer bottom line
 */
 
/*
--------------------
1. Boilerplate Styles
--------------------
*/

html,button,input,select,textarea {
  color: #222;
}

body {
  font-size: 1em;
  height: 100%;
  line-height: 1.4;
  position: relative;
 /* border: 32px solid black; */
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

img {
    vertical-align: middle;
    -ms-interpolation-mode: bicubic;
    max-width: 100%;
     height: auto;
}

input{
  /*-webkit-appearance: none;*/
}

#performance_standards_tool input {
display: inline-block;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  -webkit-resize: vertical;
  -moz-resize: vertical;
  resize: vertical;
}

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

.wrapper {
  width: 90%;
  margin: 0 5%;
}

body {
  font: 16px/26px Helvetica, Helvetica Neue, Arial;
  color: #414042;
}

/*
--------------------
2. Commons
--------------------
*/

a{
  color: #cc0066;
  text-decoration: none;
}

p{
  font-weight: lighter;
  margin: 1em 0;
}

span{
  font-size: 0.875em;
}

h1, h2, h3, h4{
   color: #003366; 
}

h5, h6{
  font-size: 1em;
  font-weight: bold;
  margin: 1em 0;
}

h2{
 font-weight: lighter;
 font-size: 1.7em;
}

hr{
  border-top: 1px solid #e3e4e5;
  height: 1px;
  display: block;
  width: 100%;
}

label{
  font-weight: normal;
}


legend{
  font-weight: bold;
}

.body-search-dropdown .accordion-header{
  font-size: 1em;
  margin: 0;
  padding: 0;
}

.bold{
  font-weight: bold;
}

.button{
  border : none;
  color : transparent;
  height :50px;
  font-size : 0;
  padding: 0;
  width : 50px;
}

.date{
  font-weight: 600;
  font-size: 0.875em;
  margin: 0;
}

.default-form-input{
  border: 2px solid #d2d3d5;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #414042;
  font-weight: normal;
  padding: 0.500em;
}

.page-content .default-form-input.w80p{
  width:80%;
}

.default-form-input.ui-state-error{
  border: 2px solid #d20000;
  display: block;
}

.form-error-list{
  color: #d20000;
}

.error-message{
  background: #FFF;
  box-shadow: 0 0 5px #CCC;
  color: #d20000;
  display: none;
  font-size: 0.7em;
  padding: 3px 10px;
  position: absolute;
  right: 20%;
  text-align: right;
  top: 8px;
}

.input-and-error-message{
  position: relative;
}

.list-style-none,
.site-map .list-style-none{
  list-style: none;
  padding: 0;
}

/* Custom selects */
.multiple-select option{
  font-size: 0.875em;
  font-weight: normal;
  padding: 0.5em;
}

.multiple-select option:hover{
  color: #003366;
  background: #e2f0f5;
}

.js-enabled .custom-select,
.custom-multiple-select{
  background: white;
  border: 1px solid #d0d2d4;
  display: block;  
  position: relative;
  font-size: 0.875em;
  font-weight: lighter;
  width: 90%;
}

.js-enabled .custom-select-green{
  background: white;
  border: 2px solid #d0d2d4;
  display: block;  
  position: relative;
  font-size: 1em;
  font-weight: lighter;
  width: 100%;
  padding-right: 16px;
}

.js-enabled .custom-select-green-half-width{
  background: white;
  border: 2px solid #d0d2d4;
  display: block;  
  position: relative;
  font-size: 1em;
  font-weight: lighter;
  width: 50%;
  padding-right: 16px;
}

.custom-multiple-select{
height: 100px;    
overflow: auto;
}


.custom-select-current{
  color: #414042;
  display: block;
  min-height: 26px;
  padding: 0.18em 0;
  position: relative;
  text-indent: 0.5em;
  width: 100%;
}

.page-content .custom-select-current:hover{
  text-decoration: none;
}


.custom-select-current:after{
  background: #e2f0f5 url(https://www.electoralcommission.org.uk/__data/assets/image/0003/155838/arrows.png?v=0.2.1) no-repeat -128px center;
  content: "";
  display: block;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width: 32px;
  height: 100%;
}

.custom-select-green .custom-select-current:after{
  background: #578300 url(https://www.electoralcommission.org.uk/__data/assets/image/0003/155838/arrows.png?v=0.2.1) no-repeat -30px center;
  content: "";
  display: block;
  position: absolute;
  right: -18px;
  text-align: center;
  top: -2px;
  width: 32px;
  padding: 2px;
 
}

.custom-select-current:focus,
.custom-select-link:focus,
.custom-multiple-select-link:focus{
  outline: none;
}

.custom-select-list,
.custom-multiple-select-list{
  background: white;
  border: 1px solid #d0d2d4;
  display: none;
  list-style: none;
  left: -1px;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  z-index: 4;
}

.custom-select-list{
  height: relative
  overflow: auto;
}

.custom-select-green .custom-select-list{
  border: 2px solid #d0d2d4;
  border-top: none;
  left:-2px;
  margin: 2px 0;
}

.custom-multiple-select-list{
  border: none;
  display: block;
  position: static;
}

.custom-select-link,
.custom-multiple-select-link{
  color: #414042;
  display: block;
  padding: 0 5%;
  width: 90%;
}

.custom-multiple-select-link{
  margin: 7px 0;
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 1.3em;
}

.custom-select-link:hover,
.custom-multiple-select-link:hover,
.selected .custom-multiple-select-link,
.page-content .custom-select-link:hover{
  color: #007fa9;
  background: #e2f0f5;
  text-decoration: none;
}

.fs-14{
  font-size: 0.875em;
}

.link-icon{
  background: url("https://www.electoralcommission.org.uk/__data/assets/image/0007/155842/link-icon.png?v=0.2.1") no-repeat center right;
  background-repeat: no-repeat;
  -ms-background-position-x: right;
  -ms-background-position-y: center;
  padding: 0 20px 0 0 ;
}

.left{
  float: left;
}

.right{
  float: right;
}

.clear-float{
  float: none;
}

.notice-icon:before{
  background: url("https://www.electoralcommission.org.uk/__data/assets/image/0011/155846/notice-icon.png?v=0.2.1") no-repeat center center;
  content: "";
  display: block;
  height: 35px;
  left: 1em;
  position: absolute;
  top: 0.7em;
  width: 36px;
}

.margin-10p{
  margin: 10px 0;
}

.width-80p{
  width: 80%;
}

.filters .notice-icon:before{
  background: url("https://www.electoralcommission.org.uk/__data/assets/image/0011/155846/notice-icon.png?v=0.2.1") no-repeat center center;
  content: "";
  display: block;
  float: left;
  height: 35px;
  margin: 5px 10px 0 0 ;
  position: static;
  width: 36px;
}

.accessibility{
  height: 1px;
  left: 0px;
  overflow: hidden;
  position: absolute;
  top: -500px;
  width: 1px;
}

.arrow-icons:after{
  background: #578300 url(https://www.electoralcommission.org.uk/__data/assets/image/0003/155838/arrows.png?v=0.2.1) no-repeat center center;
  content: "";
  position: absolute;
  height: 30px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  top: 0.8em;
  right: 1em;
  width: 32px;
}

.arrow-up:after{
  display: inline-block;
  background-position: 0 center;
}

.arrow-down:after{
  display: inline-block;
  background-position: -32px center;
}

.arrow-down-blue:after{
  background-color: #e2f0f5;
  background-position: -128px center;
  display: inline-block;
  right: 0;
  top: 0;
}

.arrow-right:after{
  display: inline-block;
  background-position: -64px center;
}

.ui-state-active .arrow-right:after{
  background-position: -32px center;
}

.arrow-left:after{
  display: inline-block;
  background-position: -96px center;
}

.wide-button-link-menu:after .arrow-down{
  content: url(mysource_files/arrow_down.png);
}

.extension-icons{
  font-weight: lighter;
}

.extension-icons:before{
  background: url("https://www.electoralcommission.org.uk/__data/assets/image/0004/155839/extension-icons.png?v=0.2.1") no-repeat no-repeat;
  content: '';
  display: none;
  height: 16px;
  overflow: hidden;
  padding: 0 0 0 0.5em;
  width: 16px;
}

.pdf-icon:before{
  display: inline-block;
  background-position: 0 0;
}

.xls-icon:before{
  display: inline-block;
  background-position: 0 -16px;
}

.doc-icon:before{
  display: inline-block;
  background-position: 0 -32px;
}

.ppt-icon:before{
  display: inline-block;
  background-position: 0 -48px;
}

.pink{
  color: #b8005c;
}

.page-content a:hover{
  text-decoration: underline;
}

.page-content h2{
  color: #0099cc;
  font-size: 1.750em;
  font-weight: lighter;
}

.page-content h3,
.page-content .elections-results .results-graph h3{
  font-size: 1.375em;
  font-weight: lighter;
  margin: 1em 0;
}

.page-content .elections-results .results-graph h3{
  color: rgb(0, 51, 102);
}

.page-content h4{
  color: #000;
}

.page-content th,
.page-content td{
  padding: 0.46em;
  border: 1px solid black;
}

.page-content th{
  text-align: left;
  border: 1px solid black;
}

.page-content ul{
  font-weight: lighter;
}

.fs-16{
  font-size: 1em;
}

.normal{
  font-weight: normal;
}

.lighter{
  font-weight: lighter;
}

.wrapper{
  margin: 0 auto;
  width: 980px;
}

.table, th, td{
  border: 1px solid black;
}

table#layout, th, td{
  border: 0px;
}

td#layout{
    border: 0px;
}
/* Popups */
#colorbox{
  outline: none;
  z-index: 999;
}

#cboxOverlay{
  background: #FFF;
  display: block;
  min-height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 300;
}

#cboxLoadedContent{
  padding: 0.313em;
}

.popup{
  background: #FFF;
  box-shadow: 0 0 5px #E4E5E6;
}

.popup-header{
  background: #007FA9;
  color: #FFF;
  font-weight: lighter;
  margin-top: 0;
  padding: 4%;
  width: 92%;
}

.popup-content{
  padding: 0 1em;
}

.popup-close{
  color: #404041;
  margin: 1em;
}

.popup-close:hover{
  color: #CC0066;
}

/*Fixes*/
.fb_results_per_page ul{
  list-style: none;
}

.fb_results_per_page li{
  float: left;
  padding: 10px;
}

/* Accordion global styling */
.accordion-header a{
  color: #003366;
  display: block;
  font-size: 0.8em;
  padding: 1em 15% 1em 1em;
  position: relative;
  width: 83%;
}

.accordion-header a:focus{
  outline: none;
}

.accordion-header a:after{
  background: #578300 url(https://www.electoralcommission.org.uk/__data/assets/image/0003/155838/arrows.png?v=0.2.1) no-repeat center center;
  background-position: -64px center;
  content: "";
  display: inline-block;
  position: absolute;
  height: 30px;
  margin: 0 auto;
  text-align: center;
  overflow: hidden;
  top: 0.8em;
  right: 1em;
  width: 32px;
}

.accordion-header.ui-state-active a:after{
  background-position: -32px center;
}

/*
--------------------
3. Desktop
--------------------
*/

/* 3.1 Header */
.header-container{
  margin: 0 auto 1.563em auto;
  position: relative;
  height: 100%;
}

/* 3.1.1 Top navigation (links, locale) */
.main-header-navigation
{
  position: absolute;
  right: 220px;
}

.lt-ie8 .main-header-navigation{
  top: 0;
}

.main-header-navigation-list{
  margin: 0.750em;
}

.main-header-buttons-list{
  margin: 0;
  position: relative;
  padding: 0;
}

.main-header-navigation-item,
.main-header-buttons-item{
  float: left;
  display: block;
}

.main-header-buttons .top-search-button,
.main-header-buttons .menu-button{
  display: none;
  padding: 0;
}

.rwd-nav{
  display: none;
  position: absolute;
  right: 0;
  top: 34px;
  width: 100%;
  z-index: 3;
}

.main-header-navigation-item{
  margin: 0 1.875em 0 0;
}

.main-header-buttons-item{
  height: 50px;
  line-height: 50px;
  position: static;
  text-align: center;
}

.main-header-buttons-list .main-header-buttons-item:first-child{
  margin: 0 0.188em 0 0;
}

.main-header-navigation-link{
  color: #003366;
  text-decoration: none;
  font-size: 1.125em;
}

.main-header-navigation .selected{
  font-weight: bold;
}

.main-header-navigation-link:hover,
.main-header-navigation-link:focus,
.main-header-buttons-link:hover,
.main-header-buttons-link:focus
{
  color: #CC0066;
  text-decoration: underline;
}

.main-header-buttons-link{
  background-color: #e4e5e6;
  color: #003366;
  display: block;
  height: 50px;
  font-size: 1.125em;
  padding: 0 20px;
  text-decoration: none;
  width: 80px;
}

.main-header-buttons .selected{
  color: #b8005c;
  position: relative;
}

.main-header-buttons .selected:after{
  content:"";
  width:0;
  height:0;
  left: 50px;
  border-left: 10px solid;
  border-right: 10px solid;
  border-top: 10px solid;
  border-color: #e4e5e6 transparent transparent transparent; 
  border-color: #e4e5e6 rgba(255,255,255,0) rgba(255,255,255,0) rgba(255,255,255,0);
  position: absolute;
  top: 100%;
}

/* 3.1.2 Logo container */
.logo-container{
  margin: 30px 0 0 0;
  position: relative;
  width: 65%;
}

.header-subtitle{
  color: #0099cc;
  font-size: 1.250em;
  font-weight: lighter;
  left: 250px;  
  line-height: 1.2em;
  margin: 0;
  position: absolute;
  bottom: -3px;
}

/* 3.1.3 Search box */
.search-box-container{
  margin: 2.5em 0 0 0;
  position: relative;
  text-align: right;
  width: 35%;
}

.rwd-search-box{
  background: #578300;
  border-top: 1px solid #6da400;
  display: none;
  position: absolute;
  right: 0;
  top: 50px;
  text-align: center;
  width: 100%;
  z-index: 3;
}

.search-button{
  background: #578300 url("https://www.electoralcommission.org.uk/__data/assets/image/0004/155848/search-icon.png?v=0.2.1") no-repeat center center;
  position: absolute;
  right: 0;
}

.lt-ie9 .search-button{
  top: 0;
}

.search-button:hover{
  background: #466a00 url("https://www.electoralcommission.org.uk/__data/assets/image/0004/155848/search-icon.png?v=0.2.1") no-repeat center center;
}

.search-input{
  background: #f7f7f8; /* Old browsers */
  /* IE9 SVG, needs conditional override of 'filter' to 'none' */
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y3ZjdmOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
  background: -moz-linear-gradient(top,  #f7f7f8 0%, #ffffff 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f8), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #f7f7f8 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #f7f7f8 0%,#ffffff 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #f7f7f8 0%,#ffffff 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #f7f7f8 0%,#ffffff 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f8', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
  border: solid 2px #d0d2d4;
  border-radius: 0;
  margin: 0 48px 0 0;
  min-width: 270px;
  line-height: 44px;
  height: 44px;
  text-indent: 10px;
}

.lt-ie9 .search-input{
  font-weight: bold;
}

/* 3.1.4 Main navigation */
.main-navigation{
  margin: 0 0 5.5em 0;
  position: relative;
  width: 100%;
  z-index: 10;
}

.main-navigation a{
  outline: none;
}

.main-navigation a{
  font-weight: lighter;
  text-decoration: none;
}

/* Top level */
.top-level-nav{
  padding: 0;
}

.top-level-item{
  background: #e4e5e6;
  display: inline;
  margin: 0 2px 0 0;
  padding: 1.344em 3.125em;
}

.lt-ie8 .top-level-item{
  display: block;
  float: left;
  height: 30px;
  padding-top: 1em;
  padding-bottom: 1em;
}

.top-level-link,
.top-level-link:focus{
  color: #003366;
  font-size: 1.250em;
  outline: none;
}

.top-level-item:hover .top-level-link{
  color: #b8005c;
}

.main-navigation .selected{
  background: #007fa9;
  padding-top: 1.345em;
}

.lt-ie8 .main-navigation .selected{
  padding-top: 1em;
  padding-bottom: 1em;
}

.main-navigation .second-level-nav .selected{
  padding: inherit;
}

.selected .top-level-link,
.selected:hover .top-level-link{
  color: white;
}

/* Second level */
.second-level-nav{
  background: #007fa9;
  border-top: 1px solid #0099cc;
  display: none;
  margin: 1.063em 0 0 0;
  padding: 0;
  position: absolute;
  width: 100%;
}

.lt-ie8 .second-level-nav{
  height: 60px;
  left: 0;
  top: 61px;
  z-index: 9999;
}

.selected .second-level-nav{
  display: block;
}

.no-js .top-level-link:focus + .second-level-nav{
  display: block;
}

.second-level-item{
  float: left;
}

.lt-ie8 .second-level-item.selected{
  height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.second-level-link{
  display: table;
  color: white;
  border: 0;
  font-size: 0.875em;
  height: 60px;
  line-height: 1.2em;
  width: 140px;
  text-align: center;
}

.second-level-link span{
  display: table-cell; 
  font-size: 1em;
  vertical-align: middle; 
  padding: 0 10px;
}

.lt-ie8 .second-level-link span{
  display: block;
  padding-top: 1em;
  height: 46px;
  text-align: center;
  width: auto;
}

.selected > .second-level-link,
.second-level-link:hover, .second-level-link:focus{
  background: #003366;
}

/* Third level */
.third-level-nav{
  background: #003366;
  display: none;
  margin: 0;
  padding: 15px 0;
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 3;
}

.lt-ie8 .third-level-nav{
  top: 60px;
  z-index: 9999;
}

.second-level-item:hover, .second-level-item:focus{
  background: #003366;
  border: 0;
}

.second-level-item:hover .third-level-nav{
  display: block;
}
.second-level-item:focus .third-level-nav{
  display: block;
}



.third-level-item{
  display: block;
  float: left;
  margin: 0 0 0 15px;
  width: 40%;
}

.third-level-link{
  color: white;
  display: block;
  font-size: 0.875em;
  padding: 5px;
  width: 100%;
}

.third-level-link:hover{
  background: #007fa9;
}

/* 3.1.5 Cookie bar */
.cookie-bar{
  border: none;
  padding: 0;
  margin: -30px 0 0 0;
  width: 100%;
}

.cookie-bar .wrapper{
  padding: 0 0 5px 0;
}

.cookie-bar-link{
  color: #FFF;
  float: left;
  font-size: 0.8em;
  line-height: 12px;
  margin: 0 0 0 10px;
  padding: 5px 0;
  text-decoration: none;
  width: 88%;
}

.cookie-bar-icon{
  background: url("https://www.electoralcommission.org.uk/__data/assets/image/0010/157960/information-icon-white.png?v=0.2.1") no-repeat left center;
  display: block;
  float: left;
  height: 21px;
  margin: 0 0 0 14px;
  width: 22px;
}

.cookie-bar-link:hover{
  text-decoration: underline;  
}

/* 3.2 Boxes */
.boxes-outer-container{
  background: #e4e5e6;
  margin: 0 0 40px 0;
  width: 100%;
}

.boxes-inner-container{
  background: #e4e5e6;
  padding: 0 0 19px 0;
}

.box{
  -webkit-box-shadow: 0 1px 3px #c4c4c4;
  box-shadow: 0 1px 3px #c4c4c4;
  display: block;
  float: left;
  height: 225px;
  margin: 2% 3.5% 0 0;
  width: 31%;
  overflow: hidden;
}


.boxes-inner-container .box:first-child{
  margin: 2% 3.5% 0 0;
}

.boxes-inner-container .box:nth-child(3n+3){
  margin: 2% 0 0 0;
}

.box header{
  background: white;
  padding: 20px 0;
}

.box.active  header{
  background: #cc0066;
  padding: 20px 0;
}

.box-title{
  color: #cc0066;
  font-size: 1.250em;
  font-weight: lighter;
  text-decoration: none;
  margin: 0 10px 0 10px;
}

.box.active .box-title{
  color: white;
}

.box.active .link-icon{
  background: url("https://www.electoralcommission.org.uk/__data/assets/image/0011/157916/link-icon-white.png?v=0.2.1") no-repeat center right;
}

.box-content{
  -webkit-box-shadow: 0 1px 3px #cacaca;
  box-shadow: 0 1px 3px #cacaca;
  position: relative;
  overflow: hidden;
}

.box-thumbnail{
  max-width: 307px;
}

.box-text-container{
  background: white;
  background:transparent;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#DFFFFFFF,endColorstr=#DFFFFFFF); 
  zoom: 1;
  background: rgba(255, 255, 255, 0.85);
  height: 100%;
  position: absolute;
  top: 100%;
  width: 100%;
}

.box-text{
  color: #003366;
  left: 0;
  margin: 0;
  padding: 1em;
  top: 0;
  z-index: 2;
}

.lt-ie9 .box-text{
  font-weight: bold;
}

.box a{
  text-decoration: none;
}

/* 3.3 News */
.news-container{
  float: left;
  width: 63%;
}

.news-title{
  background: url("https://www.electoralcommission.org.uk/__data/assets/image/0010/155845/news-icon.png?v=0.2.1") no-repeat left center;
  font-size: 1.750em;
  font-weight: normal;
  margin: 0;
  padding: 20px 0;
  text-indent: 70px;
}

.news-list{
  list-style: none;
  margin-top: 9px;
  padding: 0;
}

.news-item{
  border-top: 2px solid #e4e5e6;
  padding: 15px 0;
  margin: 0;
}

.news-list li:first-child{
  margin: 0;
  padding: 0 0 15px 0;
  border: none;
}

.news-link{
  color: #cc0066;
  text-decoration: none;
  font-weight: bold;
}

.news-link:hover{
  text-decoration: underline;
}



/* 3.4 Links */
.links-container{
  
  background: #e2f0f5;
  padding: 15px;
  margin: -15px 0 0 0;
  width: 27%;
}

.links-title{
    
    font-size: 1.750em;
  font-weight: normal;
  margin: 0;
  padding: 17px 0;
  text-indent: 0px;
}

.links-list{
  list-style: none;
  padding: 0;
}

.link-item{
  border-top: 2px solid #b8e0ed;
  padding: 15px 0;
}

.links-list li:first-child{
  border: none;
  padding: 0 0 15px 0;
}

.link-title{
  font-size: 1em;
  font-weight: bold;
  margin: 10px 0;
}

.link-text{
  font-weight: lighter;
  margin: 0;
}

.link-text a:hover{
  text-decoration: underline;
}

/* 3.5 Focus on */
.focus-on-container{
  margin: 60px auto 0 auto;
}

.focus-on-box{
  background: #cc0066;
  float: left;
  overflow: hidden;
  margin: 0 1.3% 0 0;
  width: 24%;
  height: 100%;
}

.focus-on-container div:last-child{
  margin: 0;
}

.focus-on-thumbnail{
  border-bottom: 1px solid white;
  width: 101%;
}

.focus-on-link{
  color: white;
  display: block;
  font-size: 1em;
  height: 100%;
  margin: 10px;
  font-weight: lighter;
  width: 85%;
}

.focus-on-link.link-icon{
  background: url("https://www.electoralcommission.org.uk/__data/assets/image/0011/157916/link-icon-white.png?v=0.2.1") no-repeat center right;
}

.focus-on-link:hover{
  text-decoration: underline;
}

/* 3.6 Left column */
.left-column-container{
  position: relative;
  top: -27px;
  width: 30%;
}

.wide-button{
  background: #e4e5e6;
  display: none;
  margin: 20px 0;
  width: 100%;
}

.wide-button-link{
  color: #003366;
  display: block;
  padding: 1em 15% 1em 1em;
  position: relative;
  width: 83%;
}

.wide-button-link:focus{
  outline: none;
}

/* 3.6.1 Left navigation */
.left-navigation{
  float: left;
  margin: 0;
  width: 100%;
}

.left-navigation-list{
  padding: 0;
}

.left-navigation-item{
  border-top: 2px solid #eaebec;
  padding: 0.781em 0;
}

.left-navigation-link{
  color: #003366;
  display: block;
  font-weight: bold;
}

.selected .left-navigation-link{
  color: #CC0066;
  font-weight: bold;
}

.left-navigation-link:hover{
  color: #CC0066;
  text-decoration: underline;
}

.ln-second-level-list{
  background: #eaebec;
  display: none;
  margin: 10px 0 -12.5px 0;
  padding: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
}

.ln-second-level-list{
  display: block;
}

.ln-second-level-list:after{
  content:"";
  width:0;
  height:0;
  left: 10%;
  border-left: 10px solid;
  border-right: 10px solid;
  border-bottom: 10px solid;
  border-color: transparent transparent #eaebec transparent; 
  border-color:  rgba(255,255,255,0) rgba(255,255,255,0) #eaebec rgba(255,255,255,0);
  position: absolute;
  top: -10px;
}

.ln-second-level-link{
  display: block;
  font-weight: lighter;
  padding: 2% 5%;
  width: 90%;
}

.selected > .ln-second-level-link,
.ln-second-level-link:hover{
  background: #cc0066;
  color: white;
}

.ln-third-level-list{
  background: #dddee0;
  margin: 0;
  padding: 0.625em 1.825em;
}

.ln-third-level-item{
  padding: 0.438em 0;
}

.ln-third-level-link{
  color: #b8005c;
  font-weight: lighter;
  width: 100%;
}

.selected > .ln-third-level-link,
.ln-third-level-link:hover{
  color: #414042;
}

.left-navigation-title{
  color: #414042;
  font-size: 1.250em;
  font-weight: normal;
  margin: 0;
}

/* 3.6.2 Related links */
.related-links-container{
  background: #e2f0f5;
  float: right;
  padding: 5%;
  width: 90%;
}

.related-links-title{
  background: url("https://www.electoralcommission.org.uk/__data/assets/image/0008/155843/links-icon.png?v=0.2.1") no-repeat;
  font-size: 1.250em;
  font-weight: normal;
  margin: 0;
  padding: 17px 0;
  text-indent: 70px;
}

.related-links-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.related-links-item{
 padding: 0.625em 0; 
 border-bottom: 1px solid #bae1ee;
}

.related-links-link{
  font-weight: lighter;
}

.related-links-link:hover{
 text-decoration: underline;
}

.related-links-item:last-child{
 border: none;
}

/* 3.6.3 Filters */
.filters{
  float: left;
  margin: 0;
  width: 100%;
}

.filters-title{
  background: #007fa9;
  color: white;
  font-size: 1.250em;
  margin: 0;
  text-indent: 0.8em;
  padding: 0.8em 0;
}

.filters-section-title{
  background: #e4e5e6;
  color: #414042;
  font-weight: normal;
  margin: 1px 0 0 0;
  padding: 0.8em;
}

.filters-list{
  background: #e2f0f5;
  margin: 0;
  padding: 0;
}

.filters-list .filters-item:first-child{
  margin: 0;
  padding: 0;
  border-bottom: 1px solid white;
}

.filters-list .filters-item:last-child{
  border-bottom: none;
}

.filters-item{
  border-bottom: 1px solid #bae1ee;
  margin: 0 0.625em;
  padding: 1em 0;
}

.filters-link{
  font-weight: lighter;
}

.filters-link:hover{
  text-decoration: underline;
}

.filters-notice{
  color: #003366;
  display: block;
  font-size: 1em;
  font-weight: lighter;
  margin: 0.625em auto;
}

.filter-group-container{
  margin: 0.938em 0;
}

.filter-group-title,
.page-content .filter-group-title{
  color: #414042;
  font-weight: bold;
  font-size: 1em;
}

/* 3.7 Body container */
.body-container{
  float: right;
  margin: 0 0 1.5em 3%;
  width: 67%;
}

.body-paragraph{
  font-weight: lighter;
  margin: 10px 0;
}

/* 3.7.1 Breadcrumb */
.breadcrumb{
  margin: 0 0 0 33%;
}

.breadcrumb-list{
  margin: 0;
  padding: 0;
}

.breadcrumb-item{
  float: left;
}

.breadcrumb a,
.breadcrumb-link{
  color: #007fa9;
  font-size: 0.875em;
  float: left;
}

.breadcrumb a:after,
.breadcrumb-link:after{
  content: ">>";
  color: #d8d8d9;
  font-size: 0.875em;
  font-family: arial;
  letter-spacing: -2px;
  padding: 0 5px;
  width: 10px;
  height: 10px;
}

.breadcrumb-item .current{
  color: #414042;
  display: block;
  font-size: 0.875em;
  padding: 1px 0 0 0;
}

.lt-ie9 .breadcrumb-item .current{
  padding: 0;
}

/* 3.7.2 Page intro */
h2.page-title,
.page-content h1{
  color: #003366;
  font-size: 2.250em;
  font-weight: lighter;
  line-height: 1em;
  margin: 20px 0;
}

/* 3.7.3 Latest updates */
.latest-updates{
  border: 1px solid #e4e5e6;
  margin: 40px 0 0 0;
}

.latest-updates-header{
  background: #e4e5e6;
  text-indent: 70px;
  position: relative;
}

.latest-updates-icon{
  background: url("https://www.electoralcommission.org.uk/__data/assets/image/0010/155845/news-icon.png?v=0.2.1") no-repeat;
  height: 58px;
  position: absolute;
  top: -4px;
  width: 59px;
}

.latest-updates-header-title,
.page-content .latest-updates-header-title{
  color: #003366;
  font-size: 1.250em;
  font-weight: lighter;
  margin: 0;
  padding: 12px 0;
}

.latest-updates-list{
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
}

.latest-updates-item{
  padding: 10px;
}

.latest-updates-item ul{
  padding: 0px 0px 0px 30px;
}

.latest-updates-item p{
  margin: 0 0 0.688em 0;
}

.latest-updates-item li{
  list-style: disc;
}

.latest-updates-item .date{
  margin: 0;
}

.lu-item-title{
  margin: 0;
}

.lu-item-link:hover{
  text-decoration: underline;
}

.lu-item-link.disabled{
  color: #003366;
  cursor:default;
  font-size: 1em;
  margin: 0;
}

.lu-item-link.disabled:focus{
  outline: none;
}


.lu-item-link.disabled:hover{
  text-decoration: none;
}

/* 3.7.4 Landing page links */
.lp-links{
  margin: 20px 0 0 0;
}

.lp-link-box{
  float: left;
  width: 48%;
}

.lp-links .lp-link-box:first-child{
 margin: 30px 4% 0 0; 
}

.lp-links .lp-link-box:nth-child(2n+2){
 margin: 30px 0 0 0; 
}

.lp-link-box{
  margin: 30px 4% 0 0;
}

.lp-link-header{
  background: #e4e5e6;
  padding: 15px 10px;
}

.lp-link-title{
  font-size: 1.250em;
  font-weight: lighter;
  margin: 0;
}

.lp-link-title:hover{
  text-decoration: underline;
}

.lp-links-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.lp-links-item a:hover{
  text-decoration: underline;
}

/* 3.7.5 Attachment list */
.attachment-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.attachment-item{
  margin: 1em 0;
}

/* 3.7.6 Body search box */
.body-search-box-container{
  background: #e4e5e6;
  padding: 1em;
}

.body-search-label{
  color: #414042;
  font-size: 1.250em;
  font-weight: lighter;
  padding: 0 0.625em 0 0;
}

.body-search-box-container .default-form-input{
  width: 50%;
}

.body-search-button,
.send-message-button,
.body-clear-form-button{
  background: #578300;
  border-radius: 0;
  border: none;
  color: white;
  float: right;
  font-weight: lighter;
  padding: 0.599em 1em;
  margin-bottom: 1.875em;
}

.body-search-button{
  margin: 0;  
}

.send-message-button,
.body-clear-form-button{
  float: left;
}
.send-message-button{
  margin-top: 1.250em;
}

.send-message-button:hover,
.body-search-button:hover,
.body-clear-form-button:hover{
  background: #466a00;
}

/* 3.7.7 Body search dropdown */
.body-search-dropdown{
  background: #f1f2f2;
  display: block;
  margin: 1px 0 0 0;
}

.body-search-dropdown .wide-button-link{
  font-weight: lighter;
  padding: 1em 3em 1em 3.7em;
}

.body-search-dropdown-content{
  border-top: 2px solid #e3e4e5;
  padding: 0 1em 1em 1em;
}

.filter-form a:hover{
  text-decoration: none;
}

/* 3.7.8 Body search results */
.featured-results{
  background: #e2f0f5;
  float: left;
  padding: 2%;
  width: 96%;
}

.featured-results
.search-results-item{
  border: none;
  margin: 0 0 1.875em 0;
  padding: 0;
}

.search-results{
  float: left;
  margin: 1.875em 0 0 0;
  width: 100%;
}

.search-results-list{
  margin: 0;
  list-style: none;
  padding: 0;
}

.search-results-item{
  margin: 0 0 1.5em 0;
  padding: 0 0 1.5em 0;
  border-bottom: 1px solid #e4e5e6;
}

.body-container
.search-results-item-title{
  font-size: 1em;
  font-weight: normal;
  margin: 0;
}

/* 3.7.9 Pagination */
.pagination{
  text-align: center;
}

.pagination-list{
  display: inline-block;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: auto;
}

.pagination-item{
  display: block;
  margin: 0 1px 0 0;
  float: left;
}

.pagination a:hover{
  text-decoration: none;
}

.pagination-link{
  background: #e4e5e6;
  color: #414042;
  padding: 0.625em 0.825em;
}

.pagination-previous-page-link,
.pagination-next-page-link{
  background: #578300;
  color: white;
  font-weight: normal;
  padding: 0.625em 0.825em;
}

.pagination-previous-page-link:hover,
.pagination-next-page-link:hover{
  background: #466a00;
}

.selected .pagination-link,
.pagination-link:hover{
  background: #578300;
  color: white;
}

/* 3.7.10 Contact form*/
.contact-form label{
  display: block;
  float: left;
  margin: 10px 0;
  width: 100%;
font-weight: bold
}

/* 3.7.11 Guidance */
.guidance-box{
  border: 1px solid #e4e5e6;
  display: block;
  float: left;
  margin: 1.250em 0;
  width: 100%;
}

.guidance-box-header{
  background: #e4e5e6;
  text-align: center;
}

.page-content .guidance-box-header-part{
  background: #007fa9;
  color: #FFF;
  float: left;
  font-size: 1.250em;
  margin: -1px 0 0 -1px;
  padding: 0.625em 0 0.688em 0;
  width: 20%;
  height: 100%;
}

.page-content .guidance-box-header-title{
  color: #003366;
  float: left;
  font-size: 1.250em;
  font-weight: lighter;
  margin: 0;
  padding: 0.625em 3%;
  text-align: left;
  width: 74%;
}

.guidance-box-content{
  padding: 0 1em 1em 1em;
}

.guidance-box-content ul{
  padding: 0 0 0 1.250em;
}

.accordion .wide-button-link,
.guidance-resources .wide-button-link{
  font-size: 16px;
}

.accordion .accordion-header,
.guidance-resources .accordion-header{
  background: #f1f2f2;
  margin: 0;
}

.guidance-resources .attachment-list{
  padding: 0 1em;
}

/* 3.7.12 Site map */
.site-map ul{
  margin: 0;
  padding: 0;
}

.site-map .no-padding{
  padding: 0;
}

.site-map .site-map-heading{
  font-size: 1.2em;
  margin: 10px 0;
}

.site-map .list-style-none{
  background: none;
}

.site-map li{
  padding: 0;
  list-style: disc;
}

.site-map ul > li > ul{
  padding: 0 0 0 20px;
}

/*  3.7.13 EU Referendums */

.eu-results h2 {
    color: #0099cc;
    font-size: 1.750em;
    font-weight: lighter;
}
.left-content {
    width:48%;
    float:left;
}

.left-content h3 {
    font-size:1em;
}

.left-content .grand-total {
    margin-top:1em;
}


.eu-results .grand-total {
    font-size:1.2em;
  
}

.eu-results .grand-total p {
    margin:0;
}

.eu-results  .grand-total .number {
    font-size:1.5em;
}

.eu-results .grand-total .green, .eu-results .grand-total .dark {
    width: 320px;
    display: inline-block;
        margin-bottom:.5em;
    margin-top: .5em;
}

.eu-results .grand-total .results-graph {
       width: 100%;
    display: inline-block;
    float: right;
    margin-top: 1em
}

.eu-results .grand-total .results-bar {
    background-color: #024065;
    height: 22px;

}

.eu-results .grand-total .bar-no {
    float:right;
}
.eu-results .grand-total .bar-yes {
    float:left;
}
.eu-results .grand-total .results-bar span {
    background-color:#19B2C5;
    height:22px;
    display:block;
}

.eu-results .green {
    color:#19B2C5;
}
.eu-results .dark {
    color:#024065;
}

.eu-results .region-stats {
    width:40%;
    display:inline-block;
    text-align:left;
    font-size:.875em;
  
}

.eu-results .region-stats span {
    font-size:100%;
      font-weight:bold;
}

.eu-results .national-stats {
    width:100%; 
    display:inline-block;
clear:both;
margin-top:2em;

}

.eu-results .national-stats p {
margin-right:2em
color:#000000;
margin:0!important;

}
.eu-results ul.accordion {
  list-style: none;
  padding: 0;
  display:inline-block;
  width:100%;
margin-top:2em;
}
.eu-results ul.accordion ul {
  list-style: none;
  margin-right:1em;
}
.eu-results ul.accordion .inner-content {
  padding-left: 1em;
  overflow: hidden;
  display: none;
    border:1px solid #007fa9;
}

.eu-results ul.accordion .inner-content .inner-content {
    padding-bottom:1em
}
.eu-results ul.accordion .inner-content .grand-total {
    font-size:.9em;
}

.eu-results ul.accordion .inner-content .grand-total .title {
display: inline-block;
    margin-right: 20px;
}    
    
.eu-results ul.accordion .inner-content .green, 
.eu-results ul.accordion .inner-content .grand-total .dark {
    padding-right:20px;
    display: inline-block;
    width:auto;
}

.eu-results ul.accordion .inner-content.show-content {
  /*display: block;*/

}
.eu-results ul.accordion li {
  margin: .5em 0;
}
.eu-results ul.accordion li a.toggle-link {
 
  display: block;
  background: #024065;
  color: #ffffff;
  padding: .75em;
  border-radius: 0.15em;
  transition: background .3s ease;


}
.eu-results ul.accordion li a.toggle-link:after {
    
    content: "\25BC";
    float:right;
} 

.eu-results ul.accordion li a.toggle-link:hover {
  background: #007fa9;
}

.eu-results ul.accordion li a.active {
     background: #007fa9;
}
.eu-results ul.accordion li a.active:after { 
content: "\25B2"; 

}

.eu-results .inner-content .stats {
    display:block;
    text-align:left;
    width:360px;
    border-bottom:1px solid #d3d3d3;
    padding:5px 0;
}

.eu-results .inner-content .stats .title {
    display:inline-block;
    text-align:left;
    font-weight:bold;
    width:175px;
}
.pie-container  {
    float:left;
    width:50%;
    margin-top:1em;
}


.pie-container .pie-label {
  width: 100%;
  position: absolute;
  top: 240px;
  font-weight: bold;
  color: #666;
  /*color:#efefef;*/
  text-align: center;
   font-size:.75em;
}

.pie-container .pie-label span {
    height: 10px;
    width: 10px;
    display: ilnine-block;
    display: inline-block;
    margin-right: 5px;
}
.pie-container .pie-label span.green {
    background:#19B2C5;
}
.pie-container .pie-label span.dark {
    background:#024065;
}

.pie-container .pie-wrapper {
  height: 250px;
  width: 250px;
  display: inline-block;
  position: relative;
  background: #024065;
  /*-webkit-box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.75);
  -moz-box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.75);
  box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.75);*/
  border-radius: 125px;
}
.pie-container .csspie {
  position: absolute;
  width: 125px;
  height: 250px;
  overflow: hidden;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -webkit-transform-origin: left center;
  transform-origin: left center;
}
.pie-container .csspie:BEFORE {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: -125px;
  border-radius: 125px 0 0 125px;
  -moz-transform-origin: right center;
  -ms-transform-origin: right center;
  -webkit-transform-origin: right center;
  transform-origin: right center;
}
.pie-container .csspie:BEFORE, .pie-container .csspie:AFTER {
  background-color: #19B2C5;
}
.pie-container .csspie[data-value="1"]:BEFORE {
  -moz-transform: rotate(3.6deg);
  -ms-transform: rotate(3.6deg);
  -webkit-transform: rotate(3.6deg);
  transform: rotate(3.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="2"]:BEFORE {
  -moz-transform: rotate(7.2deg);
  -ms-transform: rotate(7.2deg);
  -webkit-transform: rotate(7.2deg);
  transform: rotate(7.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="3"]:BEFORE {
  -moz-transform: rotate(10.8deg);
  -ms-transform: rotate(10.8deg);
  -webkit-transform: rotate(10.8deg);
  transform: rotate(10.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="4"]:BEFORE {
  -moz-transform: rotate(14.4deg);
  -ms-transform: rotate(14.4deg);
  -webkit-transform: rotate(14.4deg);
  transform: rotate(14.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="5"]:BEFORE {
  -moz-transform: rotate(18deg);
  -ms-transform: rotate(18deg);
  -webkit-transform: rotate(18deg);
  transform: rotate(18deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="6"]:BEFORE {
  -moz-transform: rotate(21.6deg);
  -ms-transform: rotate(21.6deg);
  -webkit-transform: rotate(21.6deg);
  transform: rotate(21.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="7"]:BEFORE {
  -moz-transform: rotate(25.2deg);
  -ms-transform: rotate(25.2deg);
  -webkit-transform: rotate(25.2deg);
  transform: rotate(25.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="8"]:BEFORE {
  -moz-transform: rotate(28.8deg);
  -ms-transform: rotate(28.8deg);
  -webkit-transform: rotate(28.8deg);
  transform: rotate(28.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="9"]:BEFORE {
  -moz-transform: rotate(32.4deg);
  -ms-transform: rotate(32.4deg);
  -webkit-transform: rotate(32.4deg);
  transform: rotate(32.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="10"]:BEFORE {
  -moz-transform: rotate(36deg);
  -ms-transform: rotate(36deg);
  -webkit-transform: rotate(36deg);
  transform: rotate(36deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="11"]:BEFORE {
  -moz-transform: rotate(39.6deg);
  -ms-transform: rotate(39.6deg);
  -webkit-transform: rotate(39.6deg);
  transform: rotate(39.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="12"]:BEFORE {
  -moz-transform: rotate(43.2deg);
  -ms-transform: rotate(43.2deg);
  -webkit-transform: rotate(43.2deg);
  transform: rotate(43.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="13"]:BEFORE {
  -moz-transform: rotate(46.8deg);
  -ms-transform: rotate(46.8deg);
  -webkit-transform: rotate(46.8deg);
  transform: rotate(46.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="14"]:BEFORE {
  -moz-transform: rotate(50.4deg);
  -ms-transform: rotate(50.4deg);
  -webkit-transform: rotate(50.4deg);
  transform: rotate(50.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="15"]:BEFORE {
  -moz-transform: rotate(54deg);
  -ms-transform: rotate(54deg);
  -webkit-transform: rotate(54deg);
  transform: rotate(54deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="16"]:BEFORE {
  -moz-transform: rotate(57.6deg);
  -ms-transform: rotate(57.6deg);
  -webkit-transform: rotate(57.6deg);
  transform: rotate(57.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="17"]:BEFORE {
  -moz-transform: rotate(61.2deg);
  -ms-transform: rotate(61.2deg);
  -webkit-transform: rotate(61.2deg);
  transform: rotate(61.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="18"]:BEFORE {
  -moz-transform: rotate(64.8deg);
  -ms-transform: rotate(64.8deg);
  -webkit-transform: rotate(64.8deg);
  transform: rotate(64.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="19"]:BEFORE {
  -moz-transform: rotate(68.4deg);
  -ms-transform: rotate(68.4deg);
  -webkit-transform: rotate(68.4deg);
  transform: rotate(68.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="20"]:BEFORE {
  -moz-transform: rotate(72deg);
  -ms-transform: rotate(72deg);
  -webkit-transform: rotate(72deg);
  transform: rotate(72deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="21"]:BEFORE {
  -moz-transform: rotate(75.6deg);
  -ms-transform: rotate(75.6deg);
  -webkit-transform: rotate(75.6deg);
  transform: rotate(75.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="22"]:BEFORE {
  -moz-transform: rotate(79.2deg);
  -ms-transform: rotate(79.2deg);
  -webkit-transform: rotate(79.2deg);
  transform: rotate(79.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="23"]:BEFORE {
  -moz-transform: rotate(82.8deg);
  -ms-transform: rotate(82.8deg);
  -webkit-transform: rotate(82.8deg);
  transform: rotate(82.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="24"]:BEFORE {
  -moz-transform: rotate(86.4deg);
  -ms-transform: rotate(86.4deg);
  -webkit-transform: rotate(86.4deg);
  transform: rotate(86.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="25"]:BEFORE {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="26"]:BEFORE {
  -moz-transform: rotate(93.6deg);
  -ms-transform: rotate(93.6deg);
  -webkit-transform: rotate(93.6deg);
  transform: rotate(93.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="27"]:BEFORE {
  -moz-transform: rotate(97.2deg);
  -ms-transform: rotate(97.2deg);
  -webkit-transform: rotate(97.2deg);
  transform: rotate(97.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="28"]:BEFORE {
  -moz-transform: rotate(100.8deg);
  -ms-transform: rotate(100.8deg);
  -webkit-transform: rotate(100.8deg);
  transform: rotate(100.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="29"]:BEFORE {
  -moz-transform: rotate(104.4deg);
  -ms-transform: rotate(104.4deg);
  -webkit-transform: rotate(104.4deg);
  transform: rotate(104.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="30"]:BEFORE {
  -moz-transform: rotate(108deg);
  -ms-transform: rotate(108deg);
  -webkit-transform: rotate(108deg);
  transform: rotate(108deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="31"]:BEFORE {
  -moz-transform: rotate(111.6deg);
  -ms-transform: rotate(111.6deg);
  -webkit-transform: rotate(111.6deg);
  transform: rotate(111.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="32"]:BEFORE {
  -moz-transform: rotate(115.2deg);
  -ms-transform: rotate(115.2deg);
  -webkit-transform: rotate(115.2deg);
  transform: rotate(115.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="33"]:BEFORE {
  -moz-transform: rotate(118.8deg);
  -ms-transform: rotate(118.8deg);
  -webkit-transform: rotate(118.8deg);
  transform: rotate(118.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="34"]:BEFORE {
  -moz-transform: rotate(122.4deg);
  -ms-transform: rotate(122.4deg);
  -webkit-transform: rotate(122.4deg);
  transform: rotate(122.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="35"]:BEFORE {
  -moz-transform: rotate(126deg);
  -ms-transform: rotate(126deg);
  -webkit-transform: rotate(126deg);
  transform: rotate(126deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="36"]:BEFORE {
  -moz-transform: rotate(129.6deg);
  -ms-transform: rotate(129.6deg);
  -webkit-transform: rotate(129.6deg);
  transform: rotate(129.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="37"]:BEFORE {
  -moz-transform: rotate(133.2deg);
  -ms-transform: rotate(133.2deg);
  -webkit-transform: rotate(133.2deg);
  transform: rotate(133.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="38"]:BEFORE {
  -moz-transform: rotate(136.8deg);
  -ms-transform: rotate(136.8deg);
  -webkit-transform: rotate(136.8deg);
  transform: rotate(136.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="39"]:BEFORE {
  -moz-transform: rotate(140.4deg);
  -ms-transform: rotate(140.4deg);
  -webkit-transform: rotate(140.4deg);
  transform: rotate(140.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="40"]:BEFORE {
  -moz-transform: rotate(144deg);
  -ms-transform: rotate(144deg);
  -webkit-transform: rotate(144deg);
  transform: rotate(144deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="41"]:BEFORE {
  -moz-transform: rotate(147.6deg);
  -ms-transform: rotate(147.6deg);
  -webkit-transform: rotate(147.6deg);
  transform: rotate(147.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="42"]:BEFORE {
  -moz-transform: rotate(151.2deg);
  -ms-transform: rotate(151.2deg);
  -webkit-transform: rotate(151.2deg);
  transform: rotate(151.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="43"]:BEFORE {
  -moz-transform: rotate(154.8deg);
  -ms-transform: rotate(154.8deg);
  -webkit-transform: rotate(154.8deg);
  transform: rotate(154.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="44"]:BEFORE {
  -moz-transform: rotate(158.4deg);
  -ms-transform: rotate(158.4deg);
  -webkit-transform: rotate(158.4deg);
  transform: rotate(158.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="45"]:BEFORE {
  -moz-transform: rotate(162deg);
  -ms-transform: rotate(162deg);
  -webkit-transform: rotate(162deg);
  transform: rotate(162deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="46"]:BEFORE {
  -moz-transform: rotate(165.6deg);
  -ms-transform: rotate(165.6deg);
  -webkit-transform: rotate(165.6deg);
  transform: rotate(165.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="47"]:BEFORE {
  -moz-transform: rotate(169.2deg);
  -ms-transform: rotate(169.2deg);
  -webkit-transform: rotate(169.2deg);
  transform: rotate(169.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="48"]:BEFORE {
  -moz-transform: rotate(172.8deg);
  -ms-transform: rotate(172.8deg);
  -webkit-transform: rotate(172.8deg);
  transform: rotate(172.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="49"]:BEFORE {
  -moz-transform: rotate(176.4deg);
  -ms-transform: rotate(176.4deg);
  -webkit-transform: rotate(176.4deg);
  transform: rotate(176.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="50"]:BEFORE {
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="51"]:BEFORE {
  -moz-transform: rotate(183.6deg);
  -ms-transform: rotate(183.6deg);
  -webkit-transform: rotate(183.6deg);
  transform: rotate(183.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="52"]:BEFORE {
  -moz-transform: rotate(187.2deg);
  -ms-transform: rotate(187.2deg);
  -webkit-transform: rotate(187.2deg);
  transform: rotate(187.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="53"]:BEFORE {
  -moz-transform: rotate(190.8deg);
  -ms-transform: rotate(190.8deg);
  -webkit-transform: rotate(190.8deg);
  transform: rotate(190.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="54"]:BEFORE {
  -moz-transform: rotate(194.4deg);
  -ms-transform: rotate(194.4deg);
  -webkit-transform: rotate(194.4deg);
  transform: rotate(194.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="55"]:BEFORE {
  -moz-transform: rotate(198deg);
  -ms-transform: rotate(198deg);
  -webkit-transform: rotate(198deg);
  transform: rotate(198deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="56"]:BEFORE {
  -moz-transform: rotate(201.6deg);
  -ms-transform: rotate(201.6deg);
  -webkit-transform: rotate(201.6deg);
  transform: rotate(201.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="57"]:BEFORE {
  -moz-transform: rotate(205.2deg);
  -ms-transform: rotate(205.2deg);
  -webkit-transform: rotate(205.2deg);
  transform: rotate(205.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="58"]:BEFORE {
  -moz-transform: rotate(208.8deg);
  -ms-transform: rotate(208.8deg);
  -webkit-transform: rotate(208.8deg);
  transform: rotate(208.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="59"]:BEFORE {
  -moz-transform: rotate(212.4deg);
  -ms-transform: rotate(212.4deg);
  -webkit-transform: rotate(212.4deg);
  transform: rotate(212.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="60"]:BEFORE {
  -moz-transform: rotate(216deg);
  -ms-transform: rotate(216deg);
  -webkit-transform: rotate(216deg);
  transform: rotate(216deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="61"]:BEFORE {
  -moz-transform: rotate(219.6deg);
  -ms-transform: rotate(219.6deg);
  -webkit-transform: rotate(219.6deg);
  transform: rotate(219.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="62"]:BEFORE {
  -moz-transform: rotate(223.2deg);
  -ms-transform: rotate(223.2deg);
  -webkit-transform: rotate(223.2deg);
  transform: rotate(223.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="63"]:BEFORE {
  -moz-transform: rotate(226.8deg);
  -ms-transform: rotate(226.8deg);
  -webkit-transform: rotate(226.8deg);
  transform: rotate(226.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="64"]:BEFORE {
  -moz-transform: rotate(230.4deg);
  -ms-transform: rotate(230.4deg);
  -webkit-transform: rotate(230.4deg);
  transform: rotate(230.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="65"]:BEFORE {
  -moz-transform: rotate(234deg);
  -ms-transform: rotate(234deg);
  -webkit-transform: rotate(234deg);
  transform: rotate(234deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="66"]:BEFORE {
  -moz-transform: rotate(237.6deg);
  -ms-transform: rotate(237.6deg);
  -webkit-transform: rotate(237.6deg);
  transform: rotate(237.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="67"]:BEFORE {
  -moz-transform: rotate(241.2deg);
  -ms-transform: rotate(241.2deg);
  -webkit-transform: rotate(241.2deg);
  transform: rotate(241.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="68"]:BEFORE {
  -moz-transform: rotate(244.8deg);
  -ms-transform: rotate(244.8deg);
  -webkit-transform: rotate(244.8deg);
  transform: rotate(244.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="69"]:BEFORE {
  -moz-transform: rotate(248.4deg);
  -ms-transform: rotate(248.4deg);
  -webkit-transform: rotate(248.4deg);
  transform: rotate(248.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="70"]:BEFORE {
  -moz-transform: rotate(252deg);
  -ms-transform: rotate(252deg);
  -webkit-transform: rotate(252deg);
  transform: rotate(252deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="71"]:BEFORE {
  -moz-transform: rotate(255.6deg);
  -ms-transform: rotate(255.6deg);
  -webkit-transform: rotate(255.6deg);
  transform: rotate(255.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="72"]:BEFORE {
  -moz-transform: rotate(259.2deg);
  -ms-transform: rotate(259.2deg);
  -webkit-transform: rotate(259.2deg);
  transform: rotate(259.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="73"]:BEFORE {
  -moz-transform: rotate(262.8deg);
  -ms-transform: rotate(262.8deg);
  -webkit-transform: rotate(262.8deg);
  transform: rotate(262.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="74"]:BEFORE {
  -moz-transform: rotate(266.4deg);
  -ms-transform: rotate(266.4deg);
  -webkit-transform: rotate(266.4deg);
  transform: rotate(266.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="75"]:BEFORE {
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="76"]:BEFORE {
  -moz-transform: rotate(273.6deg);
  -ms-transform: rotate(273.6deg);
  -webkit-transform: rotate(273.6deg);
  transform: rotate(273.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="77"]:BEFORE {
  -moz-transform: rotate(277.2deg);
  -ms-transform: rotate(277.2deg);
  -webkit-transform: rotate(277.2deg);
  transform: rotate(277.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="78"]:BEFORE {
  -moz-transform: rotate(280.8deg);
  -ms-transform: rotate(280.8deg);
  -webkit-transform: rotate(280.8deg);
  transform: rotate(280.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="79"]:BEFORE {
  -moz-transform: rotate(284.4deg);
  -ms-transform: rotate(284.4deg);
  -webkit-transform: rotate(284.4deg);
  transform: rotate(284.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="80"]:BEFORE {
  -moz-transform: rotate(288deg);
  -ms-transform: rotate(288deg);
  -webkit-transform: rotate(288deg);
  transform: rotate(288deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="81"]:BEFORE {
  -moz-transform: rotate(291.6deg);
  -ms-transform: rotate(291.6deg);
  -webkit-transform: rotate(291.6deg);
  transform: rotate(291.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="82"]:BEFORE {
  -moz-transform: rotate(295.2deg);
  -ms-transform: rotate(295.2deg);
  -webkit-transform: rotate(295.2deg);
  transform: rotate(295.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="83"]:BEFORE {
  -moz-transform: rotate(298.8deg);
  -ms-transform: rotate(298.8deg);
  -webkit-transform: rotate(298.8deg);
  transform: rotate(298.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="84"]:BEFORE {
  -moz-transform: rotate(302.4deg);
  -ms-transform: rotate(302.4deg);
  -webkit-transform: rotate(302.4deg);
  transform: rotate(302.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="85"]:BEFORE {
  -moz-transform: rotate(306deg);
  -ms-transform: rotate(306deg);
  -webkit-transform: rotate(306deg);
  transform: rotate(306deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="86"]:BEFORE {
  -moz-transform: rotate(309.6deg);
  -ms-transform: rotate(309.6deg);
  -webkit-transform: rotate(309.6deg);
  transform: rotate(309.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="87"]:BEFORE {
  -moz-transform: rotate(313.2deg);
  -ms-transform: rotate(313.2deg);
  -webkit-transform: rotate(313.2deg);
  transform: rotate(313.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="88"]:BEFORE {
  -moz-transform: rotate(316.8deg);
  -ms-transform: rotate(316.8deg);
  -webkit-transform: rotate(316.8deg);
  transform: rotate(316.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="89"]:BEFORE {
  -moz-transform: rotate(320.4deg);
  -ms-transform: rotate(320.4deg);
  -webkit-transform: rotate(320.4deg);
  transform: rotate(320.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="90"]:BEFORE {
  -moz-transform: rotate(324deg);
  -ms-transform: rotate(324deg);
  -webkit-transform: rotate(324deg);
  transform: rotate(324deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="91"]:BEFORE {
  -moz-transform: rotate(327.6deg);
  -ms-transform: rotate(327.6deg);
  -webkit-transform: rotate(327.6deg);
  transform: rotate(327.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="92"]:BEFORE {
  -moz-transform: rotate(331.2deg);
  -ms-transform: rotate(331.2deg);
  -webkit-transform: rotate(331.2deg);
  transform: rotate(331.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="93"]:BEFORE {
  -moz-transform: rotate(334.8deg);
  -ms-transform: rotate(334.8deg);
  -webkit-transform: rotate(334.8deg);
  transform: rotate(334.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="94"]:BEFORE {
  -moz-transform: rotate(338.4deg);
  -ms-transform: rotate(338.4deg);
  -webkit-transform: rotate(338.4deg);
  transform: rotate(338.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="95"]:BEFORE {
  -moz-transform: rotate(342deg);
  -ms-transform: rotate(342deg);
  -webkit-transform: rotate(342deg);
  transform: rotate(342deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="96"]:BEFORE {
  -moz-transform: rotate(345.6deg);
  -ms-transform: rotate(345.6deg);
  -webkit-transform: rotate(345.6deg);
  transform: rotate(345.6deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="97"]:BEFORE {
  -moz-transform: rotate(349.2deg);
  -ms-transform: rotate(349.2deg);
  -webkit-transform: rotate(349.2deg);
  transform: rotate(349.2deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="98"]:BEFORE {
  -moz-transform: rotate(352.8deg);
  -ms-transform: rotate(352.8deg);
  -webkit-transform: rotate(352.8deg);
  transform: rotate(352.8deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="99"]:BEFORE {
  -moz-transform: rotate(356.4deg);
  -ms-transform: rotate(356.4deg);
  -webkit-transform: rotate(356.4deg);
  transform: rotate(356.4deg);
  transition: All 1s ease;
}
.pie-container .csspie[data-value="50"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="50"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="50"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="51"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="51"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="51"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="52"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="52"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="52"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="53"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="53"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="53"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="54"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="54"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="54"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="55"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="55"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="55"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="56"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="56"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="56"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="57"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="57"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="57"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="58"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="58"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="58"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="59"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="59"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="59"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="60"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="60"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="60"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="61"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="61"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="61"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="62"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="62"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="62"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="63"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="63"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="63"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="64"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="64"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="64"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="65"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="65"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="65"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="66"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="66"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="66"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="67"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="67"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="67"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="68"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="68"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="68"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="69"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="69"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="69"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="70"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="70"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="70"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="71"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="71"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="71"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="72"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="72"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="72"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="73"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="73"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="73"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="74"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="74"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="74"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="75"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="75"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="75"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="76"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="76"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="76"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="77"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="77"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="77"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="78"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="78"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="78"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="79"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="79"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="79"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="80"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="80"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="80"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="81"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="81"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="81"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="82"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="82"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="82"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="83"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="83"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="83"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="84"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="84"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="84"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="85"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="85"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="85"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="86"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="86"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="86"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="87"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="87"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="87"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="88"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="88"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="88"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="89"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="89"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="89"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="90"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="90"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="90"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="91"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="91"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="91"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="92"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="92"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="92"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="93"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="93"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="93"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="94"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="94"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="94"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="95"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="95"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="95"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="96"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="96"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="96"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="97"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="97"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="97"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="98"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="98"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="98"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="99"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="99"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="99"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="100"] {
  width: 250px;
  height: 250px;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -webkit-transform-origin: center center;
  transform-origin: center center;
}
.pie-container .csspie[data-value="100"]:BEFORE {
  left: 0px;
}
.pie-container .csspie[data-value="100"]:AFTER {
  content: "";
  position: absolute;
  width: 125px;
  height: 250px;
  left: 125px;
  border-radius: 0 125px 125px 0;
}
.pie-container .csspie[data-value="0"] {
  left: 125px;
}
.pie-container .csspie[data-value="1"] {
  left: 125px;
}
.pie-container .csspie[data-value="2"] {
  left: 125px;
}
.pie-container .csspie[data-value="3"] {
  left: 125px;
}
.pie-container .csspie[data-value="4"] {
  left: 125px;
}
.pie-container .csspie[data-value="5"] {
  left: 125px;
}
.pie-container .csspie[data-value="6"] {
  left: 125px;
}
.pie-container .csspie[data-value="7"] {
  left: 125px;
}
.pie-container .csspie[data-value="8"] {
  left: 125px;
}
.pie-container .csspie[data-value="9"] {
  left: 125px;
}
.pie-container .csspie[data-value="10"] {
  left: 125px;
}
.pie-container .csspie[data-value="11"] {
  left: 125px;
}
.pie-container .csspie[data-value="12"] {
  left: 125px;
}
.pie-container .csspie[data-value="13"] {
  left: 125px;
}
.pie-container .csspie[data-value="14"] {
  left: 125px;
}
.pie-container .csspie[data-value="15"] {
  left: 125px;
}
.pie-container .csspie[data-value="16"] {
  left: 125px;
}
.pie-container .csspie[data-value="17"] {
  left: 125px;
}
.pie-container .csspie[data-value="18"] {
  left: 125px;
}
.pie-container .csspie[data-value="19"] {
  left: 125px;
}
.pie-container .csspie[data-value="20"] {
  left: 125px;
}
.pie-container .csspie[data-value="21"] {
  left: 125px;
}
.pie-container .csspie[data-value="22"] {
  left: 125px;
}
.pie-container .csspie[data-value="23"] {
  left: 125px;
}
.pie-container .csspie[data-value="24"] {
  left: 125px;
}
.pie-container .csspie[data-value="25"] {
  left: 125px;
}
.pie-container .csspie[data-value="26"] {
  left: 125px;
}
.pie-container .csspie[data-value="27"] {
  left: 125px;
}
.pie-container .csspie[data-value="28"] {
  left: 125px;
}
.pie-container .csspie[data-value="29"] {
  left: 125px;
}
.pie-container .csspie[data-value="30"] {
  left: 125px;
}
.pie-container .csspie[data-value="31"] {
  left: 125px;
}
.pie-container .csspie[data-value="32"] {
  left: 125px;
}
.pie-container .csspie[data-value="33"] {
  left: 125px;
}
.pie-container .csspie[data-value="34"] {
  left: 125px;
}
.pie-container .csspie[data-value="35"] {
  left: 125px;
}
.pie-container .csspie[data-value="36"] {
  left: 125px;
}
.pie-container .csspie[data-value="37"] {
  left: 125px;
}
.pie-container .csspie[data-value="38"] {
  left: 125px;
}
.pie-container .csspie[data-value="39"] {
  left: 125px;
}
.pie-container .csspie[data-value="40"] {
  left: 125px;
}
.pie-container .csspie[data-value="41"] {
  left: 125px;
}
.pie-container .csspie[data-value="42"] {
  left: 125px;
}
.pie-container .csspie[data-value="43"] {
  left: 125px;
}
.pie-container .csspie[data-value="44"] {
  left: 125px;
}
.pie-container .csspie[data-value="45"] {
  left: 125px;
}
.pie-container .csspie[data-value="46"] {
  left: 125px;
}
.pie-container .csspie[data-value="47"] {
  left: 125px;
}
.pie-container .csspie[data-value="48"] {
  left: 125px;
}
.pie-container .csspie[data-value="49"] {
  left: 125px;
}
@keyframes glow {
  0% {
    box-shadow: 0px 0px 12px 0px rgba(255, 255, 255, 0.75);
  }
  50% {
    box-shadow: 0px 0px 18px 0px rgba(255, 255, 255, 0.75);
  }
  75% {
    box-shadow: 0px 0px 16px 0px rgba(255, 255, 255, 0.75);
  }
  100% {
    box-shadow: 0px 0px 14px 0px rgba(255, 255, 255, 0.75);
  }
}

/* 3.8 Footer */
.footer-container{
  background: #e4e5e6;
  margin: 1.875em 0 0 0;
}

/* 3.8.1 Footer navigation */
.footer-navigation-column{
  float: left;
  padding: 0 2% 0 0;
  position: relative;
  width:23%;
}

.footer-navigation-title{
  font-size: 1.250em;
  font-weight: lighter;
  margin: 35px 5px 25px 0;
}

.footer-navigation-list{
  padding: 0;
}

.footer-navigation-item{
  padding: 5px 0;
}

.footer-navigation-link{
  color: #414042;
  font-weight: lighter;
}

.footer-navigation-link:hover{
  color: #CC0066;
  text-decoration: none;
}

/* 3.8.2 Social media */
.facebook-link{
  background: #578300 url("https://www.electoralcommission.org.uk/__data/assets/image/0005/155840/facebook-icon.png?v=0.2.2") no-repeat center center;
  margin: 0 15px 0 0;
}

.twitter-link{
  background: #578300 url("https://www.electoralcommission.org.uk/__data/assets/image/0005/155849/twitter-icon.png?v=0.2.4") no-repeat center center;
  margin: 0 15px 0 0;
}

.blog-link{
  background: #578300 url("https://www.electoralcommission.org.uk/__data/assets/image/0006/182463/blog-icon-copy.png?v=0.1.2") no-repeat center center;
margin: 0 15px 0 0;
}

.linkedin-link{
background: #578300 url("https://www.electoralcommission.org.uk/__data/assets/image/0017/215900/linkedin-icon.png?v=0.1.8") no-repeat center center;
margin: 0 15px 0 0;
 
  
}
.facebook-link:hover{
  background: #466a00 url("https://www.electoralcommission.org.uk/__data/assets/image/0005/155840/facebook-icon.png?v=0.2.2") no-repeat center center;
}

.twitter-link:hover{
  background: #466a00 url("https://www.electoralcommission.org.uk/__data/assets/image/0005/155849/twitter-icon.png?v=0.2.4") no-repeat center center;
}

.blog-link:hover{
  background: #466a00 url("https://www.electoralcommission.org.uk/__data/assets/image/0006/182463/blog-icon-copy.png?v=0.1.2") no-repeat center center;
}

/* 3.8.3 Footer bottom line */
.footer-bottom-line{
  background: #007fa9;
  margin: 1em auto 0 auto;
  padding: 1em 0 45px 0;
}

.footer-bottom-line-list{
  margin: 0;
  padding: 0;
}

.footer-bottom-line-item{
  display: block;
  float: left;
}

.footer-bottom-line-link{
  color: white;
  padding: 0 1em;
}

.footer-bottom-line-link:hover{
  text-decoration: underline;
}

.copyright{
  color: white;
  float: left;
  font-weight: lighter;
  font-size: 0.875em;
  padding: 0 0 0 1em;
  width: 100%;
}
.copyright a {
  color:#fff;
  text-decoration:none;
}
.copyright a:hover {
  color:#fff;
  text-decoration:underline;
}

/*
--------------------
4. Tablet Portrait Mode
--------------------
*/

@media only screen and (max-width : 990px){
  .wrapper{
    margin: 0 7.5%;
    width: 85%;
  }

  /* 4.1.1 Top navigation */
  .top-navigation{
    width: 60%;
  }

  .main-header-buttons{
    float: right;
    position: relative;
  }

 .main-header-buttons .top-search-button{
    display: block;
    background: #578300 url("https://www.electoralcommission.org.uk/__data/assets/image/0004/155848/search-icon.png?v=0.2.1") no-repeat center center;
    float: right;
    margin: 0 0 0 6px;
  }

  .main-header-buttons .menu-button{
    display: block;
    background: #007fa9 url("https://www.electoralcommission.org.uk/__data/assets/image/0009/155844/menu-icon.png?v=0.2.1") no-repeat center center;
    float: right;
    margin: 0 0 0 2px;
  }

  .main-header-navigation{
    margin: 90px 0 0 0;
    right:0;
  }

  .main-header-navigation-item{
    margin: 0 10px;
  }


  /* 4.1.2 Logo container */
  .logo-container{
    margin: 30px 0 40px 0;
    width: 40%;
  }

  .header-subtitle{
    display: none;
  }

  /* 4.1.3 Search box */
  .search-box-container{
    display: none;
  }



  .rwd-search-button{
    background: transparent url("https://www.electoralcommission.org.uk/__data/assets/image/0003/155847/search-icon-green.png?v=0.2.1") no-repeat center center;
    border: 0;
    color : transparent;
    display: block;
    font-size : 0;
    height: 25px;
    position: absolute;
    right: 30px;
    top: 28px;
    width: 25px;
  }

  .rwd-search-box .search-input{
    padding: 0;
    margin: 5%;
    width: 90%;
  }

  .no-js .main-header-buttons-item:hover .rwd-search-box{
    display: block;
  }

  /* 4.1.4 Main navigation */
  .main-navigation{
    display: none;
  }

  .no-js .main-header-buttons-item:hover .rwd-nav{
    display: block;
  }

  .rwd-nav-list{
    background: #007fa9;
    border-top: 1px solid #0099cc;
    padding: 1em;
    text-align: left;
  }

  .rwd-nav-item{
    background: transparent;
    display: block;  
    padding: 0;
  }

  .rwd-nav-heading{
    color: white;
    font-size: 1.250em;
    font-weight: lighter;
    margin: 0;
    padding: 0 10px;
    display: block;  
  }

  .rwd-nav-heading.current{
    background: #003366;
  }

  .rwd-nav-link{
    background: transparent;
    color: white;
    display: block;  
    line-height: 1.6em;
    font-size: 0.875em;
    padding: 10px 0 10px 1em;
  }

  .rwd-nav-link:hover{
    background: #003366;
  }

  .rwd-sub-nav-list{
    margin: 0;
    padding: 0;
  }

  /* 4.2 Boxes */
  .boxes-inner-container{
    padding: 0 0 20px 0;
  }

  .box-text-container{
    display: none;
  }

  .box{
    margin: 2% 4% 0 0;
    width: 48%;
  }

  .box-thumbnail{
    max-width: 100%;
    width: 100%;
  }

  .boxes-inner-container .box:first-child{
    margin: 2% 4% 0 0;
  }

  .boxes-inner-container .box:nth-child(3n+3){
    margin: 2% 4% 0 0;
  }

  .boxes-inner-container .box:nth-child(2n+2){
    margin: 2% 0 0 0;
  }

  /* 4.3 News */
  .news-container{
    float: none;
    width: 100%;
  }

  /* 4.4 Links */
  .links-container{
    float: none;
    padding: 5%;
    width: 90%;
  }  

  /* 4.5 Focus on */
  .focus-on-container{
    float: none;
    margin: 2.500em auto 0 auto;
    width: 85%;
  }

  .focus-on-box{
    margin: 2% 4% 0 0;
    width: 48%;
  }

  .focus-on-thumbnail{
    float: left;
    width: 101%;
  }

  .focus-on-link{
    float: left;
  }

  .focus-on-container .focus-on-box:first-child{
    margin: 2% 4% 0 0;
  }


  .focus-on-container .focus-on-box:nth-child(2n+2){
    margin: 2% 0 0 0;
  }

  .focus-on-container .focus-on-box:last-child{
    margin: 2% 0 0 0;
  }

  /* 4.6 Left column */
  .left-column-container{
    display: table;
    padding: 0;
    width: 100%;
  }
  /* 4.6 Left navigation */
  .wide-button{
    display: block;
  }

  .left-navigation{
    display: table-footer-group;
    width: 100%;
    float: none;
  }

  /* 4.6.2 Related links */
  .related-links-container{
    display: table-header-group;
    float: none;
  }

  .related-links-title{
    margin: 3%;
    margin-bottom: 0;
  }

  .related-links-list{
    padding: 3%;
  }

  /* 4.7 Body container */
  .body-container{
    float: none;
    margin: 0 0 1.5em 0;
    width: 100%;
  }

  .breadcrumb{
    margin: 0;
  }

  /* 4.7.1 Body search */
  .body-search-label{
    display: block;
  }

  .body-search-box-container .default-form-input{
    width: 65%;
  }

  /* 4.8 Footer */
  /* 4.8.1 Footer navigation */
  .footer-navigation-column{
    float: left;
    padding: 0;
    position: relative;
    width:50%;
  }

  /* 4.6.2 Footer bottom line */
  .footer-bottom-line{
    margin: 1em auto 0 auto;
    padding: 1em 0 45px 0;
  }

  .filters-notice{
    display: none;
  }
}

/*
--------------------
5. Phones
--------------------
*/

@media only screen and (max-width : 767px){
  body{
    min-width: 465px;
  }

  .wrapper{
    margin: 0 10%;
    width: 80%;
    position: relative;
  }

  .cookie-bar{
    text-align: left;
  }

  .cookie-bar-link{
    margin-top: 2px;
  }

  .cookie-bar-icon{
    margin: 7px 0 0 14px;
  }
  /* 5.1 Header */
  /* 5.1.1 Top navigation */
  .top-navigation{
    width: 100%;
  }

  .main-header-buttons{
    float: none;
    margin: 0 auto;
    position: relative;
    text-align: center;
    width: 100%;
  }

  .main-header-buttons-list{
    display: inline-block;
  }

  .main-header-buttons-link{
    padding: 0 1.403em;
  }

  .main-header-navigation{
    margin: 0.625em 0 0 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
  }

  .main-header-navigation-list{
    margin: 0;
  }

  .main-header-navigation-item{
    float: none;
    margin: 0.4em 0 1em 0;
    display: block;
  } 

  .main-header-navigation-link{
    font-size: 1em;
  }

  /* 5.1.2 Logo container */
  .logo-container{
    float: none;
    margin: 20px 0 20px 0;
    width: 100%;
  }



  /* 5.2 Boxes */
  .boxes-outer-container{
    margin: 20px 0 0 0;
    padding: 20px 0 0 0;
  }

  .boxes-inner-container .box:first-child,
  .boxes-inner-container .box:nth-child(3n+3),
  .boxes-inner-container .box:nth-child(2n+2)
  {
    margin: 0 0 2px 0;
  }

  .box{
    height: 100%;
    margin: 0 0 2px 0;
    width: 100%;
  }

  .box-content{
    display: none;
  }

  /* 5.3 News */
  .news-container{
    margin: 40px 0 0 0;
  }

  /* 5.4 Links */
  .links-container{
    margin: 30px 0 0 0;
  }

  /* 5.5 Focus on */
  .focus-on-container{
    margin: 60px auto 0 auto;
  }

  .focus-on-box{
    margin: 0 0 3px 0;
    width: 100%;
  }

  .focus-on-link{
    padding: 10px;
    margin: 0;
    width: 91%;
  }

  .focus-on-container .focus-on-box:first-child,
  .focus-on-container .focus-on-box:nth-child(2n+2){
    margin: 0 0 3px 0;
  }

  .focus-on-thumbnail{
    display: none;
  }

  .cookie-bar{
    background: #E4E5E6;
    margin: -42px 0 0 0;
    width: 100%;
  }

  /* 5.6 Body container */
  /* 5.6.1 Landing page links*/
  .lp-link-box{
    float: left;
    width: 100%;
  }

  /* 5.6.2 Body search dropdown */
  .body-search-dropdown{
    display: none;
  }

  .body-search-button {
    margin: 1em 0px 0px;
  }

  /* 5.6.3 Pagination */
  .pagination-link{
    padding: 0.625em 0.525em;
  }

  .page-content .fb_search_pagination {
    line-height: 2.8em;
  }


  /* 5.6.4 Guidance box */
  .page-content .guidance-box-header-part{
    font-size: 0.9em;
  }

  .page-content .guidance-box-header-title{
    font-size: 0.88em;
  }

  /* 5.7 Footer */
  /* 5.7.1 Footer navigation */
  .footer-navigation-column{
    display: none;
  }

  .more-information{
    display: block;
    width:100%;
  }

  .more-information .footer-navigation-item{
    display: block;
    float: left;
    width: 50%;
  }

  /* 5.7.2 Social media */
  .social-media-container{
    float: right;
  }

  .pink{
    float: left;
    margin: 10px 10px 0 0;
  }

  /* 5.7.3 Footer bottom line */
  .footer-bottom-line{
    margin: 15px auto 0 auto;
      padding: 1em 0 45px 0;

  }

  .footer-bottom-line-item{
    margin: 0 0 0 1em;
    width: 44%;
  }

  .footer-bottom-line-link{
    font-size: 0.875em;
    padding: 0;
  }

  .page-content .fb_advanced_search{
    display: none;
  }

  .page-content .fb_simple_search input,
  .body-search-box-container .default-form-input {
    width: 92%;
  }

  .page-content .fb_simple_search .fb_submit{
    margin: 1em 0 0 0;
    width: 82px;
  }

  .page-content .submit{
    margin: 1em 0 0 0;
  }

  .page-content .fb_simple_search{
    padding-bottom: 4.5em;
  }

  .page-content .column-2{
    width: 100%;
  }

  .election-results-page .chartparty{
    background: none;
    border: none;
    text-align: left;
    width: 100%;
  }

  .election-results-page .chartbg{
    background: none;
    border: none;
    text-align: left;
    width: 100%;
  }
  
   /* EU Referendums */
  .eu-results .region-stats {
      width:100%;
  }
  .eu-results ul.accordion .inner-content .grand-total {
      margin-bottom:1em;
  }
  .eu-results ul.accordion .inner-content .green, 
  .eu-results ul.accordion .inner-content .grand-total .dark {
      width:100%;
  }
  
  .eu-results ul.accordion ul {
      padding-left:0;
  }
  .pie-container,.left-content {
  width:100%;
text-align:center;
  }
.left-content {
margin-top:1em;
}
}

/*
--------------------
5. Phones (portrait)
--------------------
*/

@media only screen and (max-width : 320px){
  body{
    min-width: 320px;
  }

  .wrapper{
    margin: 0 5%;
    width: 90%;
  }

  .rwd-nav-heading {
    line-height: 1.1em;
    padding: 0.5em 10px;
  }

  .rwd-search-box .search-input{
    min-width: 50%;
  }

  .rwd-search-button{
    top: 25px;
  }

  .main-header-buttons-link {
    padding: 0px 4.2px;
  }

  .main-header-buttons .selected:after{
    left: 34px;
  }

  .page-content .fb_simple_search input,
  .body-search-box-container .default-form-input {
    width: 92%;
  }

  .page-content .fb_simple_search .fb_submit{
    margin: 1em 0 0 0;
    width: 82px;
  }

  .page-content .fb_simple_search{
    padding-bottom: 4.5em;
  }

  .body-search-button {
    margin: 1em 0 0 0;
  }

  .pagination-item {
    margin: 0 1px 1.1em 0px;
  }

  .pagination-link {
    padding: 0.8em;
  }

  .pagination-previous-page-link, 
  .pagination-next-page-link{
    padding: 0.8em;
  }

  .links-container{
    margin-bottom: 30px;
  }

  .news-title{
    padding-left: 70px;
    text-indent: 0;
  }

  .footer-bottom-line{
    margin-top: 5px;
    padding: 1em 0 57px 0;
  }

  .more-information .footer-navigation-item{
    width: 50%;
  }

/*  .footer-navigation-item:last-child{
    margin-top: -36px;
  }
*/

  .cookie-bar-link{
    width: 80%;
  }

  .cookie-bar{
    margin: -52px 0 0 0;
  }

  .search-results-item .column-4,
  .search-results-item .column-3,
  .search-results-item .column-2{
    width: 100%;
  }

  .search-results-item .column-4,
  .search-results-item .column-3,
  .search-results-item .column-2{
    width: 100%;
  }

  .fb_search_result_list .fb_result_date_published,
  .fb_search_result_list .fb_result_section
  {
    float: none;
    width: 100%;
  }

  .fb_search_results .fb_search_result_list li{
    padding: 0px 0px 1.5em;
  }

  .fb_search .fb_advanced_search{
    background: #F1F2F2;
    padding: 1em 1em 4em 1em;
  }

  .column_group .column-4.margin-10p{
    width: 100%;
  }
   /*EU Referendums*/
  .pie-container {
   width:100%;
   text-align: center;
   margin-bottom:1em;
  }
  .left-content {
    width:100%;
  }
}

/*
--------------------
6. Helpers
--------------------
*/
*:focus {
    outline: 0;
}

.column-1{
  display: block;
  float: left;
  margin: 0 0 0.625em 0;
  width: 100%;
}

.column-1.margin-t-1e{
  margin: 1em 0 0.625em 0;
}

.column-2{
  display: block;
  float: left;
  width: 50%;
}

.column-3{
  display: block;
  float: left;
  width: 33.3%;
}

.column-4{
  display: block;
  float: left;
  width: 25%;
}

.column-10p{
  width: 10%;
}

.column-20p{
  width: 20%;
}

.column-35p{
  width: 35%;
}

.column-80p{
  display: block;
  float: left;
  width: 80%;
}

.column-85p{
  display: block;
  float: left;
  width: 85%;
}

.column-80p .custom-select-link{
  padding: 0 1.8%;
  width: 96.4%;
}

.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix:before,.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/*Funnelback fixes*/

.fb_simple_search{
  background: #E4E5E6;
  padding: 1em;
}

.fb_date.reverse_emphasis{
  float: left;
  width:60%;
}

.fb_multiple_select_filter{
  float: left;
  width: 40%;
}


.fb_simple_search input{
  border: 2px solid #d2d3d5;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #414042;
  font-weight: lighter;
  padding: 0.500em;
  width: 80%;
}

.fb_simple_search h3{
  margin: 0;
}

.fb_advanced_search .lighter{
  margin: 1em 0;
}

.fb_advanced_search .fb_date .lighter{
  margin: 0.2em 0 0 0;
}

.fb_advanced_search{
  background: #F1F2F2;
  margin: 0 0 4em 0;
  padding: 0;
}

.fb_advanced_search h3{
  margin: 0 0 1em 0;
}

.fb_advanced_search legend{
  font-weight: bold;
  margin: 1em 0 1em 0;
}

.fb_advanced_search.radio label{
  display: inline;
  margin: 0 0.5em 1em 0;
}

.fb_advanced_search label{
  display: block;
  margin: 0 0 1em 0;
}

.fb_advanced_search .accordion-content{
  border-top: 2px solid rgb(227, 228, 229);
  padding: 1em;
}

.fb_search_result_list{
  padding: 0;
}

.fb_date .lighter{
  display: block;
  float: left;
  width: 15%;
}

.fb_search_result_list li{
  clear: both;
  margin: 0 0 1.5em 0;
  padding: 0 0 2.3em 0;
  border-bottom: 1px solid #e4e5e6;
  list-style: none;
}

.fb_multiple_select_filter .lighter,
.fb_single_select_filter .lighter{
  font-weight: bold;
}

.fb_result_section{
  display: block;
  float: left;
  font-size: 0.875em;
  /*width: 55%;*/
  margin-right: 10px;
}

.fb_result_section span{
  font-size: 1em;
  font-weight: bold;
}

.fb_result_date_published{
  display: block;
  float: left;
  font-size: 0.875em;
  font-weight: bold;
  width: 25%;
}

.page-content .clearfield:hover{
  text-decoration: none;
}

.fb_submit,
.fb_simple_search .fb_submit,
.clearfield{
  background: #578300;
  border-radius: 0;
  border: none;
  color: white;
  float: right;
  font-weight: lighter;
  padding: 0.599em 1em;
  margin: 1em 0 0 0;
}

.fb_simple_search .fb_submit{
  margin: 0;
  width: 82px;
}

.clearfield{
  line-height: normal;
  float:left;
}

.clearfield:hover,
.fb_submit:hover{
  background: #466a00;
}

/*Custom select FB*/
.fb_advanced_search div[data-select-name="meta_d1day"],
.fb_advanced_search div[data-select-name="meta_d2day"]{
  float: left;
  width: 20%;
}

.fb_advanced_search div[data-select-name="meta_d1month"],
.fb_advanced_search div[data-select-name="meta_d2month"]{
  float: left;
  margin: 0 0 10px 3%;
  width: 35%;
}

.fb_advanced_search div[data-select-name="meta_d1year"],
.fb_advanced_search div[data-select-name="meta_d2year"]
{
  float: left;
  margin: 0 0 10px 3%;
  width: 20%;
}

.fb_advanced_search div[data-select-name="sort"]{
  width: 94.3%;
}

.fb_advanced_search div[data-select-name="sort"] .custom-select-list{
  height: 60px;
}

.fb_advanced_search div[data-select-name="meta_C"]{
  width: 90%;
}

.column_filter, .column_minor{
  border-bottom: 1px solid #e4e5e6;
  /*margin-top: 7px;*/
  padding: 1em 0px 1.5em;
}

.fb_search_pagination{
  text-align: center;
  letter-spacing: -2px;
}

.fb_search_pagination .pagination-current{
  background: #578300;
  color: #FFF;
  font-size: 1em;
  font-weight: lighter;
  margin: 0 4px;
  padding: 0.625em 0.625em;
}

.fb_search_pagination a{
  background: #e4e5e6;
  color: #414042;
  font-weight: lighter;
  padding: 0.625em 0.825em;
}

.fb_search_pagination a.next,
.fb_search_pagination a.previous{
  background: #578300;
  color: #FFF;
}

.fb_single_select_filter{
  display: block;
  width: 100%;
}

.fb_search_pagination a:hover{
  background: #578300;
  color: white;
  text-decoration: none;
}

.tier_header,
.fb_search_result_count,
.fb_widget.similiar_results,
.fb_results_per_page{
  display: none;
}

div.advanced_submit fieldset.fb_search_narrow label.lighter, div.column_minor fieldset.fb_search_narrow label.lighter {
  display: inline;
  margin: 0.5em 1em 0 0;
}

div.column_filter fieldset.fb_search_narrow label.lighter, div.fb_advanced_search fieldset.fb_multiple_radio_filter label.lighter {
    display: inline;
    margin: 0.5em 1em 0 0;
}

div.column_minor fieldset.fb_single_select_filter {
  width: 50%;
}

/* Charts styles */

.chart ul,
.chart-wide ul{
  float: left;
  padding: 0;
  margin: 5px 0;
  width: 100%;
}

.election-results-page table{
  border: 1px solid #000;
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 15px 0 0 0;
}

.election-results-page th,
.election-results-page td{
  border: 1px solid #000;
  padding: 0.46em;
}

/*.election-results-page th{
  background: none repeat scroll 0% 0% rgb(238, 242, 245);
  border: 1px solid rgb(255, 255, 255);
  font-size: 0.8em;
  font-weight: normal;
  line-height: 1.2em;
  padding: 5px;
  text-align: left;
}

.election-results-page td{
  border: 1px solid rgb(153, 153, 153);
  font-size: 0.8em;
  padding: 0;
  text-align: center
}*/

.map-dropdown .submit,
.election-results-page .submit{
  background: #578300;
  border-radius: 0;
  border: none;
  color: white;
  font-weight: lighter;
  padding: 0.599em 1em;
}

.chartparty {
  background: url("https://www.electoralcommission.org.uk/__data/assets/image/0006/158856/results-chart-top.gif?v=0.2.1") no-repeat scroll right top transparent;
  border-right: 1px solid rgb(0, 177, 239);
  list-style: none;
  width: 50%;
  text-align: right;
  margin: 1px 0;
  padding: 0px 8px 0px 0px;
  float: left;
}

.chartbg {
  background-image: none;
  border-top: 1px solid rgb(255, 255, 255);
  list-style: none;
  width: 48%;
  margin: 1px 0;
  margin-left: 2px;
  float: left;
}

.chartbg .odd{
  background-color: #003366;
}

.chartbg .even{
  background-color: #0099cc;
}

/*Referendums*/
.left-column,
.right-column{
  display: block;
  float:left;
  width: 50%;
}

.right-column .custom-select-current,
.right-column .custom-select-link{
  font-size: 16px;
}

.right-column p,
.right-column .custom-select-link{
  font-weight: normal;
}

.map-dropdown{
  padding: 0 10px 10px 10px;
}

.page-content .elections-results,
.page-content .elections-results .results-details,
.page-content #content.elections-results a.help{
  font-size: 16px;
}

.page-content .elections-results .results-votes.results-yes .number{
  margin-top: 25px;
}

.page-content #content.elections-results a.back{
  font-size: 16px;
  width: auto;
}

.page-content .elections-results .results-graph span.bar-yes,
.page-content .elections-results .results-graph span.bar-no{
  font-size: 16px;
}

.page-content .map-dropdown p{
  padding: 10px 0 0 0 !important;
}


@media (min-width: 990px) {
  .rwd-nav-list {
  display: none !important;
  }
}


/*
 * Lightbox Table Styles
 * Added by lwoollett@squiz.co.uk
 */

.lightbox-table-container iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    border: 1px solid rgb(0, 0, 0);
 
}
.lightbox-table-container #cboxClose{
    position:absolute;
    bottom:0;
    right:0;
    background:url(mysource_files/controls.png) no-repeat -25px 0;
    width:25px; height:25px; text-indent:-9999px;
    border:0;
}
.lightbox-table-container #cboxLoadedContent{
    background-color: #FFF;
}
.lightbox-table-container #cboxClose:hover{
    background-position:-25px -25px;
}




/*
 * Register logo style
 */

h1#register {
  width: 414px;
  height: 110px;
  padding: 40px 10px 15px 15px;
  font-size: 3.5em;
  font-family: Swiss 721 lt;
  color: #FFF;
  line-height: 75%;
  background-color: #7AB800  
}
h1#register span {
  display: none;
}

/* END additions */



/*
 * Partner text style
 */

p#partner1 {
 width: 250px;
  height: relative;
  padding: 40px 10px 40px 15px;
  font-size: 2em;
  font-family: Swiss 721 lt;
  text-align: left;
  color: #003366;
  line-height: 50%;
  background-color: #FFF;
border-radius: 25px;
border-style: solid;
border-width: 2px;
border-color: #003366

}
p#partner1 span {
  display: none;
}

.accessibilityimage {
border-width: 1px; 
border-color: #003366;
border-style: solid;
}

a#alternative{
  color: #003366;
  text-decoration: none;
}

h4#etpagelinespacing{
margin: 0.7em 0 0em 0;
}

p#etpagelinespacing{
margin: 0.35em 0 1.4em 0;
}
/*
 * EC blog
 */
 
  .blog-container{
  width: 90%;
  margin: 1% 0 0 2%;
}


.blog-box{
  float: left;
  width: 30%;
  margin: 15px 0% 0 2%;
}
.blog-thumbnail{
  -webkit-box-shadow: 0 1px 3px #c4c4c4;
  box-shadow: 0 1px 3px #c4c4c4;
  display: block;
  float: left;
  margin: 10px 0 0px 0;
  width: 100%;
  overflow: hidden;
}
.blog-link-box{
  float: left;
  width: 100%;
  margin: 10px 0 20px 0;
}

@media only screen and (max-width : 990px){
  body{
    min-width: 551px;
  }
    .blog-box{
  float: left;
  width: 45%;
  margin: 15px 3% 0 0;
    }
}
@media only screen and (max-width : 550px){
  body{
    min-width: 466px;
  }
    .blog-box{
  float: left;
  width: 100%;
  margin: 15px 3% 0 0;
    }
    
}

@media only screen and (max-width : 465px){
  body{
    min-width: 320px;
  }
.blog-thumbnail{
    display: none;
}    
.blog-box{
  float: left;
  width: 100%;
  margin: 15px 3% 15px 0;
  border-bottom-style: solid;
}
.blog-link-box{
  float: left;
  width: 80%;
  margin: 0 0 30px 0;
}
}
.blog-page-container{
  width: 100%;
  margin: 0 0 0 0;
}
.blog-page-thumbnail{
  -webkit-box-shadow: 0 6px 6px #c4c4c4;
  box-shadow: 0 6px 6px #c4c4c4;
  display: block;
  float: left;
  margin: 0px 25px 15px 0px;
  overflow: hidden;
    
}
p#blog{
  float: right;
}

.blog-list-container{
  float: right;
  width: 18%;
  position: relative;
  top: 40%;
}
.blog-item{
  border-top: 2px solid #e4e5e6;
  padding: 0 0;
  margin: 0;
}

.blog-list li:first-child{
  border: none
  font-size: 0.8em;
}

.blog-list-link{
  color: #cc0066;
  font-size: 0.8em;
  
}

.blog-list-date{
    font-size: 0.8em;

}
.blog-list-link:hover{
  text-decoration: underline;
}

.all-blogs-list{
    width: 24%;
    float: right;
    position: relative;
    background: #e2f0f5;
    -webkit-box-shadow: 0 6px 6px #c4c4c4;
  box-shadow: 0 6px 6px #c4c4c4;
  padding: 3% 3% 5% 3%;
  margin: 25px 55px 0px 0px;
}


.facebook-link-new{
  background: #003366 url("https://www.electoralcommission.org.uk/__data/assets/image/0005/155840/facebook-icon.png?v=0.2.2") no-repeat center center;
  margin: 0 10px 0 0;
  vertical-align: middle;
  
}

.twitter-link-new{
  background: #003366 url("https://www.electoralcommission.org.uk/__data/assets/image/0005/155849/twitter-icon.png?v=0.2.4") no-repeat center center;
  margin: 0px 10px 0 0;
  vertical-align: middle;
}
.blog-link-new{
  background: #003366 url("https://www.electoralcommission.org.uk/__data/assets/image/0006/182463/blog-icon-copy.png?v=0.1.2") no-repeat center center;
  margin: 0px 10px 0 0;
  vertical-align: middle;
}
.linkedin-link-new{
  background: #003366 url("https://www.electoralcommission.org.uk/__data/assets/image/0017/215900/linkedin-icon.png?v=0.1.8") no-repeat center center;
  margin: 0px 10px 0 0;
  vertical-align: middle;
}
.iconstable { 
    display: table; }
.iconsrow { display: table-row;
vertical-align: middle;}
.iconscell { display: table-cell;
vertical-align: middle;}

a#h4{color: #003366;}

.table-viz, table, tbody, tr, th, td{
  border: 0px;
}

/*
 * EC web guidance
 */
.webguidancealert {
    border-radius: 50%;
    display:inline-block;

    width: 36px;
    height: 36px;
    padding: 8px;

    background: #fff;
    border: 2px solid #003366;
    color: #003366;
    text-align: center;

    font: 36px Helvetica, Helvetica Neue, Arial;
    float: left;
    margin-right:9px;
    
    
    
}

p#webalert{
        padding-top:14px;
        padding-bottom:14px;
}

.pageintro {
    font-weight: bold;
}

.question {
    font-weight: bold;
}

.answer {
    padding-bottom: 1em;
border-bottom: 1px solid #e3e4e5;
}

.floated_img
{
    float: left;
    padding-right: 15px;
    -ms-interpolation-mode: bicubic;
}
.aftergrid
{
    clear:both;
}

/*
 * EC case studies layout
 */
.listing {
    background-color: #fff;
    border: 1px solid #003366;
}

p.listing {
    padding: 15px 5px 15px 10px;
    margin-top: 2px;
    margin-bottom: 2px;
}

ol.listing {
-webkit-column-count: 2;
-moz-column-count: 2;
-ms-column-count: 2;
-o-column-count: 2;
column-count: 2;
-webkit-column-gap: 2.5em;
-moz-column-gap: 2.5em;
-ms-column-gap: 2.5em;
-o-column-gap: 2.5em;
column-gap: 2.5em;
border: 0px;
margin-bottom: 20px;

}
li.listing {
    margin: 0 0 0.5em 0;
}

.reportlinks {
    
    padding: 0 1em 1.25em 0.5em;
}

.reference {
    padding: 0 5em 0 2.5em;
}

/*
 * EC info table
 */
 
.table1 {width: 90%;
margin-left: 2%;
margin-top: 2em;
margin-bottom: 2em;
    
}
.table1 table {border: 0px;
    width: 100%;
    
}
.table1 tr {border: 0px; width:100%;}
.table1 tr:nth-child(even) {background-color: #f2f2f2;
    border: 0px;
}
.table1 td {border-left: 0px;
border-top: 0px;
border-bottom: 0px;
border-right: 0px solid #ddd;}
.table1 th {color: #fff;
    background-color: #003366;
     border-right: 0px;
     border-left: 0px;
     border-top: 0px;
     border-bottom: 0px;}
     
.table1 tbody {border: 0px; width:90%;}
.table1 thead {border: 0px; width:90%;}
     

.table1-full-width {width: 100%;
margin-left: 0px;
margin-top: 2em;
margin-bottom: 2em;
    
}
.table1-full-width table {border: 0px;
    width: 100%;
    
}
.table1-full-width tr {border: 0px; width:100%;}
.table1-full-width tr:nth-child(even) {background-color: #f2f2f2;
    border: 0px;
}
.table1-full-width td {border-left: 0px;
border-top: 0px;
border-bottom: 0px;
border-right: 0px solid #ddd;}
.table1-full-width th {color: #fff;
    background-color: #003366;
     border-right: 0px;
     border-left: 0px;
     border-top: 0px;
     border-bottom: 0px;}
     
.table1-full-width tbody {border: 0px; width:90%;}
.table1-full-width thead {border: 0px; width:90%;}

table#salary{
  border: 0px;
}

td#salary{
    border-right: 1px solid #ddd;
}
tr#salary:nth-child(even) {background-color: #f2f2f2}

th#salary {
    color: #fff;
    background-color: #003366;
     border-right: 0px;
     border-left: 0px;
     border-top: 0px;
     border-bottom: 0px;
}

.listing {
    background-color: #fff;
    border: 1px solid #003366;
}
ul.listing1 {
-webkit-column-count: 1;
-moz-column-count: 1;
-ms-column-count: 1;
-o-column-count: 1;
column-count: 1;
border: 0px;
margin-bottom: 20px;
list-style-type: none;
    margin: 0;
    padding: 0;

}
li.listing1 {
    margin: 0 0 0 0;
    list-style-type: none;
    padding: 10px 10px 10px 10px;
background: #fff; }
li.listing1:nth-child(even) { background: #f2f2f2; }

}

table#layout1{
  border: 0px;
  margin-left: 20px;
}

td#layout1{
    border: 0px;
    margin-left: 20px;
}


/*
 * Election reports
 */

.recommendation {
    border: 2px;
    border-style: solid;
    border-color: #003366;
    box-sizing: border-box;
    padding: 1.5em;
}

.sanction {
    font-size: 80%;
}

.sanctionsummary {
    margin-top: -0.5em;
    font-size: 80%;
    color: #003366;
}

.report-breadcrumb{
  margin: 0 0 0 2%;
} 

.contents-link {
    text-align: right;
}

.guidance-test-container{
  width: 80%;
  margin: 1% 0 0 2%;
}

.guidance-test-title{
    padding-top:1em;
}
.guidance-button {
    background-color: #46a33e;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 3px 2px;
    cursor: pointer;
    color: #fff;
    font-size: 1.4em;
    margin-left:500px;
    box-shadow: 3px 3px grey;
}

.guidance-back-button {
    background-color:  #e4e5e6;
    border: none;
    color: #003366;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 3px 2px;
    cursor: pointer;
    font-size: 1.4em;
    margin-left:0px;
    box-shadow: 3px 3px grey;
    border: 0;
}

.partnerlogo
{
    float: left;
    padding-right: 25px;
    padding-bottom: 25px;
    -ms-interpolation-mode: bicubic;
}

.guidancebreadcrumb{
  margin: 0 0 0 0;
}

.consultationquestion  {
    position: relative;
    color: #003057;
    padding: 1em;
    display: flex;
    flex-wrap: wrap;
    background-color: #E6F4F7;
}

.consultationquestion p {
    margin-bottom:10px;
}

@media only screen and (max-width : 550px){
  
    ol.listing {
  -webkit-column-count: 1;
-moz-column-count: 1;
-ms-column-count: 1;
-o-column-count: 1;
column-count: 1;
    }
    
}

.contact-form-field {
    display: none;
}

/**
 * Custom Form Styling
 */
 
.styled-form fieldset {
    display: table-cell;
}

.styled-form label {
    display: block;
    margin: 10px 0;
    width: 100%;
    font-weight: bold;
}

.styled-form [type="checkbox"] + label,
.styled-form [type="radio"] + label {
    display: inline;
}

.styled-form [type="date"] {
    margin-bottom: 1.875em;
}

.styled-form .sq-form-question-text input,
.styled-form .sq-form-question-email-address input {
    color: #414042;
    padding: 0.5em;
    border: 2px solid #d2d3d5;
    border-radius: 0;
    box-shadow: none;
    font-weight: normal;
    box-sizing: border-box;
    max-width: 100%;
}

.styled-form .sq-form-question-text input:invalid,
.styled-form .sq-form-question-email-address input:invalid,
.styled-form .sq-form-question-error input {
    border-color: #d20000;
}

.styled-form input[type="submit"] {
    background: #578300;
    border-radius: 0;
    border: none;
    color: white;
    float: none;
    font-weight: lighter;
    padding: 0.599em 1em;
    margin-top: 1.250em;
    margin-bottom: 1.875em;
}

.styled-form abbr[title] {
    color: #d20000;
    border-bottom-width: 0;
}

.styled-form .sq-form-question-option-list ul {
    padding-left: 0;
    list-style: none;
}