/*
Theme Name: Battery Test Centre
Theme URI: http://themegrill.com/themes/radiate/
Description:    radiate child theme
Author:         ThemeGrill
Author URI:     http://themegrill.com/
Template:       radiate
Version:        1.0.0
*/

@import url("../radiate/style.css");
 
/* page structure */
  
#page, #parallax-bg {
 max-width: 1280px;
 margin: 0 auto;
}

.alt-sidebar #secondary { float: left; width: 23% }
.alt-sidebar #primary { float: right; width: 74%; }

.header-wrap {
 position: initial;
}
 
/* header */
 
.header-wrap {
 opacity: initial;
 filter: none;
 border: none;
}

.site-title a {
 display: block;
 background: url(images/logo.png?vector=440x45);
 background-size: 100% 100%;
 color: rgba(0, 0, 0, 0);
 width: 440px;
 height: 45px;
 text-indent: -9999px;
 margin-top: 6px;
}

.main-navigation li {
 line-height: 3;
 border: none;
}

.main-navigation li a {
 text-transform: uppercase; 
}
.main-navigation li:nth-child(odd) a {
 background-color: #d1d2d4;
}
.main-navigation li:nth-child(even) a {
 background-color: #f3f3f4;
}
.main-navigation li.current_page_item > a {
 background-color: #cc0033 !important;
}
.main-navigation li.current_page_ancestor > a {
 background-color: #F58221 !important;
}
.main-navigation li:hover > a {
 background-color: #444 !important;
}

/* banner */

.page #parallax-bg { background-position: center -306px; background-repeat: repeat !important; }
.admin-bar #parallax-bg { background-position: center -274px; }

#masthead {
 margin-bottom: 0px !important;
}

#banner-placeholder {
 position: relative;
 height: 370px;
 
}
/*CK: as per CM request 'swish' removed from banners
#banner-placeholder:after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  bottom: 0; left: 0;
  background: url(images/overlay-corner.png) right bottom no-repeat;
} */
#banner-logo {
 position: absolute;
 top: 225px; left: 0;
 width: 355px; height: 105px;
 background: #FFF url(../../uploads/2016/03/itp_renewables.png) 50px center no-repeat;
 border-radius: 0 0 20px 0;
}

/* footer */
 
#colophon {
 padding: 0;
 border: 0;
}
 
#colophon .site-map {
 height: 225px;
 background: #CC0033 url(images/footer-background.png) top right no-repeat;
}

#colophon .site-map .nav-menu {
 float: left;
 display: inline;
 margin: 0 20px 0 80px;
 max-width: 130px;
}

#colophon .site-map h4 {
 padding: 30px 0 5px 80px;
 color: #FFF;
 font-size: 1.7rem;
 font-weight: bold;
}

#colophon .site-map .nav-menu li a {
 display: inline-block;
 font-family: 'Roboto', sans-serif;
 font-size: 1.1rem;
 line-height: 1.3;
 vertical-align: text-top;
 color: #FFF;
}

#itpau-details {
 width: 350px;
 margin-right: 46px;
 float: right;
 text-align: right;
 color: #FFF;
 font-family: 'Roboto', sans-serif;
 font-size: 1.1rem;
 line-height: 1.8;
}

#colophon .site-info {
 height: 60px;
 text-align: left;
 margin: 20px 0 0 80px;
}

#colophon a {
 color: #FFF;
}

#colophon .site-info img {
 float: left;
}

#colophon .site-info div.copyright-text {
 float: left;
 margin: 15px 0 0 30px;
}

#colophon .site-info div.branding-text {
 float: right;
 margin: 11px 130px 0 0;
}

#colophon .site-info div.copyright-text ,
#colophon .site-info div.branding-text {
 font-family: 'Roboto', sans-serif;
 font-size: 13px;
}

#colophon .site-info div.branding-text a img {
 margin-left: 5px;
 float: none;
 border: none;
}

#scroll-up {
 bottom: 0px !important;
}
#scroll-up span {
 color: #C60031 !important;
}

/* content */


#content {
 padding-top: 25px;
}

.type-page {
 border-radius: 0 0 100px 0;
}

.entry-content h2, h2.entry-title, h2.entry-title a, h3.widget-title {
 color: #C60031 !important;
 font-size: 2.2rem;
}

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

a.site-link {
 font-weight: bold;
 color: #000;
}
a.email-link {
 text-decoration: underline;
}

.bold-red {
 font-weight: bold;
 color: #C60031;
}

label { 
 font-family: 'Roboto', sans-serif;
 font-weight: bold;
}

ul.list-arrows {
 padding-left: 0px;
 list-style: none;
 line-height: 35px;
}

ul.list-arrows li:before{
 content:'';
 padding: 0 0 0 35px;
 background: url(images/list-arrow.gif) no-repeat 0 2px;
}

#contact-us td{
 border: none !important;
}
#contact-us .wpcf7-text,
#contact-us .wpcf7-textarea {
 width: 80%;
 border-radius: 10px !important;
 border-color: #000 !important;
}

.wpcf7-submit { 
 background-color: #cc0033 !important;
 font-weight: bold;
}

#featured_pages .page_text_container .entry-desc {
 min-height: 145px;
}

#featured_pages .page_text_container a.more-link {
	/*AP: as per CM request, Read more buttons are disabled. Also works "visibility:hidden !important;" */
	display:none !important;  
}

#partner-logo-arena, #partner-logo-cit {
 margin-bottom: 0 !important;
}

#partner-logo-itp {
 margin-left: 10px;
}

#partner-logo-cit {
 margin-left: 40px;
}

#real-time-results {
 height: 885px;
 margin-bottom: 4rem;
 /* background-color: #CCC; */
}

.sidebar_nav li {
 padding: 10px;
 margin: 0px;
 border-top: #888 solid 2px;
}
.sidebar_nav li:last-child {
 border-bottom: #888 solid 2px;
}
.sidebar_nav li a {
 line-height: 20px;
 font-family: 'Roboto';
 font-size: 17px;
 color: #888; 
}

.sidebar_nav li.current_page_item {
 border-color: #000;
}
.sidebar_nav li.current_page_item + li {
 border-top-color: #000;
}
.sidebar_nav li.current_page_item a {
 color: #000;
}

.battery_list .battery {
 width: 31%; height: 120px; float: left;
 margin-right: 2%;
}

.battery_list .battery table tr td {
 vertical-align: middle;
 border: 0;
}
.battery_list .battery table tr td.thumb {
 width: 90px;
 text-align: center;
}
.battery_list .battery table tr td.title {
 font-family: 'Roboto', sans-serif;
 font-weight: bold;
 font-size: 14px;
}

.entry-content .battery-image {
 float: left;
 background-color: #EFEFEF;
 margin: 0 10px 10px 0;
}

.battery_widget  {
}

.battery_widget a {
 display: block;
 margin: 0 auto;
}

.battery_widget a.colour-bar {
 max-width: 130px;
 padding-left: 10px;
 margin-top: 15px;
 margin-bottom: 30px;
 border-left: #049 5px solid;
 font-size: 14px;
 font-family: 'Roboto', sans-serif;
 font-weight: bold;
 color: #000;
}


.battery-text-colour {
 color: inherit !important;
}

#batteries_infographic {
 position: relative;
 height: 885px;
 margin-bottom: 4rem;
 background-color: #EEE;
}

#block_infographic {
 position: absolute;
 top: 0px; left: 0px;
 width: 100%; height: 100%;
 z-index: 9990;
}
#block_infographic div {
 position: absolute;
 top: 0px; left: 0px;
 width: 100%; height: 100%;
 background-color: #333;
 z-index: 9995;
 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 filter: alpha(opacity=70);
 -moz-opacity: 0.7;
 -khtml-opacity: 0.7;
 opacity: 0.7;
}
#block_infographic span {
 display: block;
 position: absolute;
 top: 200px; left: 20%;
 width: 60%; height: 150px;
 line-height: 150px;
 text-align: center;
 margin-top: 150px;
 font-size: 20px;
 background: #000;
 color: #FFF;
 border: #FFF 1px solid;
 z-index: 9999;
}

#switchboard_device {
 width: 235px; height: 80px;
}
#switchboard_device .title {
 padding-top: 28px;
 text-align: center;
}
#grid_device, #load_device {
 width: 190px; height: 56px;
}
#grid_device .title, #load_device .title {
 padding: 16px 15px 0px 15px;
 text-align: left;
}
#grid_device .title > span, #load_device .title  > span {
 float: right;
 color: #BBB;
}
#grid_device .output-label, #load_device .output-label {
 font-size: 18px;
 padding-left: 3px;
 padding-top: 4px;
}

#batteries_infographic a,
#batteries_infographic a:hover {
 text-decoration: none;
}

#batteries_infographic .device_container {
 position: absolute;
 font-family: 'Roboto', sans-serif;
 border: #FFF 5px solid;
 background: #000;
 border-radius: 12px;
 box-shadow: 0px 0px 7px #999;
}

#batteries_infographic .device_container .title {
 line-height: 25px;
 font-size: 25px;
 font-weight: bold;
 color: #FFF;
}

#batteries_infographic .battery_container {
  margin-top: 13px;
  width: 124px;
  height: 182px;
  font-family: 'Roboto', sans-serif;
  border: #000 5px solid;
  background: #000;
  border-radius: 12px;
}

#batteries_infographic .battery_container:before {
 content: "";
 display: block;
 width: 44px; height: 13px;
 margin: -18px 0 0 40px;
 background-color: inherit;
 border-radius: 6px 6px 0 0;
}

#batteries_infographic .battery_container .battery_name {
 min-height: 32px;
 margin-top: 5px;
 font-family: inherit;
 font-size: 12px;
 font-weight: bold;
 text-transform: uppercase;
 line-height: 15px;
 padding: 5px 10px;
 
 background: #000;
 background-image: -moz-linear-gradient(top, #000, #424542);
 background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000), to(#424542));
 border-radius: 9px 9px 0 0;
}

#batteries_infographic .battery_container .battery_data {
 height: 140px;
 background: #000;
 border-radius: 0 0 9px 9px;
}

#batteries_infographic .battery_container .battery_data .output {
 padding-left: 7px;
 padding-top: 10px;
 font-family: inherit;
 font-size: 42px;
 line-height: 42px;
 color: #BBB;
}
#batteries_infographic .battery_container .battery_data .output-label {
 padding-left: 9px;
 padding-bottom: 22px;
 font-family: inherit;
 font-size: 22px;
 line-height: 22px;
 color: #FFF;
}
#batteries_infographic .battery_container .battery_data .medium-right {
 padding-right: 9px;
 text-align: right;
 font-family: inherit;
 font-size: 16px;
 line-height: 16px;
 color: #FFF;
}

 #batteries_infographic .line-segment-v {
 position: absolute;
 display: block;
 height: 18px; width: 8px;
 background: #444;
}

 #batteries_infographic .line-segment-h{
 position: absolute;
 display: block;
 height: 8px; width: 18px;
 background: #444;
}

 #batteries_infographic .line-segment-corner {
  position: absolute;
  display: block;
  height: 18px; width: 18px;
  background: #444;
 }

 #batteries_infographic .line-segment-corner.tl {
  border-radius: 0 0 10px 0;
 }
 #batteries_infographic .line-segment-corner.tl:before {
  content: '';
  display: block;
  width: 10px; height: 10px;
  border-radius: 0 0 4px 0;
  background: #eee;
 }
 #batteries_infographic .line-segment-corner.tr {
  border-radius: 0 0 0 10px;
 }
 #batteries_infographic .line-segment-corner.tr:before {
  content: '';
  display: block;
  width: 10px; height: 10px;
  margin-left: 8px;
  border-radius: 0 0 0 4px;
  background: #eee;
 }
 #batteries_infographic .line-segment-corner.bl {
  border-radius: 0 10px 0 0;
 }
 #batteries_infographic .line-segment-corner.bl:before {
  content: '';
  display: block;
  width: 10px; height: 10px;
  margin-top: 8px;
  border-radius: 0 4px 0 0;
  background: #eee;
 }
 #batteries_infographic .line-segment-corner.br {
  border-radius: 10px 0 0 0;
 }
 #batteries_infographic .line-segment-corner.br:before {
  content: '';
  display: block;
  width: 10px; height: 10px;
  margin-left: 8px;
  margin-top: 8px;
  border-radius: 4px 0 0 0;
  background: #eee;
 }

 @-webkit-keyframes blink {
    0%{ background-color: #222; border-color: #222; }
    35%{ background-color: #FFCC00; border-color: #FFCC00; }
    70%{ background-color: #222; border-color: #222; }
	100%{ background-color: #222; border-color: #222; }
 }
 @-moz-keyframes blink {
    0%{ background-color: #222; border-color: #222; }
    35%{ background-color: #FFCC00; border-color: #FFCC00; }
    70%{ background-color: #222; border-color: #222; }
	100%{ background-color: #222; border-color: #222; }
 }
 @-ms-keyframes blink {
    0%{ background-color: #222; border-color: #222; }
    35%{ background-color: #FFCC00; border-color: #FFCC00; }
    70%{ background-color: #222; border-color: #222; }
	100%{ background-color: #222; border-color: #222; }
 }
 @-o-keyframes blink {
    0%{ background-color: #222; border-color: #222; }
    35%{ background-color: #FFCC00; border-color: #FFCC00; }
    70%{ background-color: #222; border-color: #222; }
	100%{ background-color: #222; border-color: #222; }
 }
 @keyframes blink {
    0%{ background-color: #222; border-color: #222; }
    35%{ background-color: #FFCC00; border-color: #FFCC00; }
    70%{ background-color: #222; border-color: #222; }
	100%{ background-color: #222; border-color: #222; }
 }
 
 .battery-grid-container .blink {
    background-color: #222; border-color: #222;
    -webkit-animation: blink 5s linear 1s infinite normal;
    -moz-animation: blink 5s linear 1s infinite normal;  
    -ms-animation: blink 5s linear 1s infinite normal;  
    -o-animation: blink 5s linear 1s infinite normal;
    animation: blink 5s linear 1s infinite normal;
	animation-delay: 20ms;
	animation-duration: 2000ms;
 }

 .thermometer {
    width:15px;
    height:150px;
    display:block;
    border-radius:22px 22px 0 0;
    border:3px solid #4a1c03;
    border-bottom:none;
    position:absolute;
    box-shadow:inset 0 0 0 4px #fff;
    color:#4a1c03;
}
 .thermometer > span {
  position: absolute;
  left: 4px;
  bottom: 0px;
  width: 7px;
  background:#F72222;
 }
 .thermometer:before {
    content:' ';
    width:29px;
    height:29px;
    display:block;
    position:absolute;
    top:145px;
    left:-10px;
    z-index:-1;
    /* Place the bulb under the column */
    background:#F72222;
    border-radius:44px;
    border:3px solid #4a1c03;
    box-shadow:inset 0 0 0 4px #fff;
}
 .thermometer:after {
    content:' ';
    width:7px;
    height:9px;
    display:block;
    position:absolute;
    top:145px;
    left:4px;
    background:#F72222;
}

#room_temperature .thermometer {
 position: absolute;
 top: 0px;
 left: 12px;
}
#room_temperature .amount {
 position: absolute;
 top: 195px;
 left: 0px;
 width: 44px;
 height: 32px;
 text-align: center;
 line-height: 30px;
 font-size: 16px;
 font-weight: bold;
 border: #000 2px solid;
 border-radius: 5px;
}
#room_temperature .label {
 position: absolute;
 top: 0px;
 left: 42px;
 height: 160px;
 width: 16px;
}
#room_temperature .label span {
 display: block;
 white-space: nowrap;
 font-size: 12px;
 font-weight: bold;
 -webkit-transform: rotate(90deg);
 -webkit-transform-origin: bottom left;
 -moz-transform: rotate(90deg);
 -moz-transform-origin: bottom left; 
 -ms-transform: rotate(90deg);
 -ms-transform-origin: bottom left; 
 -o-transform: rotate(90deg);
 -o-transform-origin: bottom left;
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

.battery-graph {
 float: left;
 clear: both;
}

.page-template-page-results .inner-wrap {
 max-width: 1280px;
 width: 100%;
}

.select-a-battery-container {
 position: relative;
}

.select-a-battery-container h3 {
 text-align: center;
 margin-top: 10px;
 margin-bottom: 58px;
 font-size: 21px;
 font-weight: bold;
 color: #000;
}

.battery-info-table-container {
 margin-bottom: 28px;
 background-color: #666;
}
.battery-grid-container {
 text-align: center;
 font-size: 0;
}
.battery-content-container {
 margin: 0px 50px;
}

.battery-slider-button {
 position: absolute;
 top:204px;
 display: inline-block;
 width: 44px; height: 44px;
 background: #FFF url(images/slider-arrows.gif) no-repeat;
 border: 0;
 border-radius: 0;
 color: rgba(0, 0, 0, 0);
}

#battery-slider-button-next {
 background-position: 0px -44px;
}

#battery-slider {
  position: relative;
  display: block;
  overflow: hidden;
  height: 285px;
  margin: 24px 94px 0 94px;
  text-align: center;
 }
.battery-slide {
 height: 285px;
 width: 144px;
}
.battery-slide-content {
 transition: all .2s ease;
 width: 100%;
 height: 285px;
}
.battery-slide-content table {
 border: none;
 border-collapse: collapse;
 margin: 0; padding: 0;
}
.battery-slide-content td {
 margin: 0; padding: 0;
 border: 0;
 font-size: 0;
 text-align: center;
 vertical-align: middle;
}

.slick-center {
 width: 228px;
}

.slick-center .battery-slide-content {
 /* background: rebeccapurple;
 transform: translate(-70px,0px);
 width: calc(~"100% + 140px");
 max-width: initial; */
}

.battery-slide {
	opacity: 0.3;
}
 
.slick-current{
	opacity: 1;
}

.battery-info-table-col-left {
 float: left;
 width: 100%;
 max-width: 600px;
}

.battery-info-table-col-right {
 position: relative;
 float: left;
 width: 100%;
 max-width: 680px;
 height: 424px;
}

.battery-info-table {
 width: 100%;
 max-width: 450px;
 margin: 32px auto;
 border: none;
 border-collapse: collapse;
 font-family: 'Roboto', sans-serif;
 font-size: 18px;
 color: #FFF;
}

.battery-info-table td {
 padding: 6px 0px;
 border: none;
 border-bottom: 2px solid #FFF;
}
.battery-info-table tr:last-child td {
 border-bottom: none;
}



.battery-info-table td.header {
 text-align: left;
 font-weight: bold;
}
.battery-info-table td.data {
 text-align: right;
}

.battery-info-large-battery {
 position: relative;
 width: 272px;
 height: 469px;
 margin-top: -27px;
 background: url(images/large-battery-empty.png);
}

.battery-info-large-battery div {
 padding-left: 50px;
 font-family: 'Roboto', sans-serif;
 color: #FFF;
}

.battery-info-large-battery  .battery_reading {
 position: absolute;
 top: 65px;
 font-size: 60px;
 font-weight: bold;
 line-height: 60px;
}
.battery-info-large-battery  .battery_reading span {
 display: block;
 font-size: 42px;
 line-height: 42px;
}
.battery-info-large-battery  .battery_status {
 position: absolute; top: 305px;
 font-size: 36px;
}
.battery-info-large-battery  .battery_soc {
 position: absolute; top: 365px;
 font-size: 36px;
}

.battery-info-large-battery  .battery_fill {
 position: absolute;
 bottom: 31px; left: 1px;
 width: 270px; height: 1px;
 padding: 0;
 background: url(images/large-battery-fill.gif) repeat-y;
}

#battery-info-table-live {
 position: absolute; 
 top: 30px; right: 30px;
 height: 82px; line-height: 82px;
 width: 160px;
 text-align: center;
 font-family: 'Roboto', sans-serif;
 font-size: 57px;
 color: #FFF;
 background-color: #CB0037;
}

#battery-info-table-live  .blink {
    background-color: #CB0037; border-color: #CB0037;
    -webkit-animation: blink 5s linear 1s infinite normal;
    -moz-animation: blink 5s linear 1s infinite normal;  
    -ms-animation: blink 5s linear 1s infinite normal;  
    -o-animation: blink 5s linear 1s infinite normal;
    animation: blink 5s linear 1s infinite normal;
	animation-delay: 0ms;
	animation-duration: 1000ms;
 }

#battery-info-table-live::after {
    position: absolute;
    top: 0px;
    left: -24px;
    content: '';
    width: 0; height: 0;
    border-right: solid 24px #CB0037;
    border-bottom: solid 41px transparent;
    border-top: solid 41px transparent;
}

#battery-info-table-name {
 position: absolute; 
 top: 170px; left: 320px;
 font-family: 'Roboto', sans-serif;
 font-size: 41px;
 line-height: 48px;
 color: #FFF;
 padding-right: 15px;
}


.battery-grid-col {
 position: relative;
 display: inline-block;
 padding: 16px;
}


.battery-grid-container .battery_container {
  position: relative;
  width: 98px;
  height: 162px;
  margin-top: -2px;
  background: url(images/grey-battery.png);  
  font-family: 'Roboto', sans-serif;
  text-align: left;
}

.battery-grid-container a.selected .battery_container {
 background: url(images/green-battery.png);  
}
.battery-grid-container a.selected .battery_container .battery_reading {
 color: #FFF;
}

.battery-grid-container .battery_container .battery_reading {
 padding: 22px 12px 0 12px;
 font-size: 24px;
 line-height: 24px;
 color: #A7CD39;
 text-decoration: none;
}
.battery-grid-container .battery_container .battery_reading span {
 display: block;
 font-size: 18px;
 line-height: 20px;
 text-decoration: none;
}
.battery-grid-container .battery_container .battery_name {
 position: absolute; bottom: 0px; left: 0px;
 padding: 12px;
 font-size: 12px;
 line-height: 18px;
 color: #FFF;
 text-decoration: none;
}

.battery-grid-container .battery_container .battery_name:hover{
	text-decoration: underline;
	-moz-text-decoration-color: white; /* Code for Firefox */
	text-decoration-color: white;
}

.battery-grid-col .battery_connector {
  margin-left: 44px;
  width: 10px;
  height: 39px;
  background-color: #222;
}

.battery-grid-col:before {
 content: "";
 display: block;
 position: absolute;
 width: 200px; height: 10px;
 top: 210px; left: 0px;
 background-color: #222;
}
.battery-grid-col:first-child:before {
 left: 70px;
 width: 60px;
}
.battery-grid-col:last-child:before {
 width: 70px;
}

.battery-grid-container-note {
 margin-left: 50px;
 font-family: 'Roboto', sans-serif;
 font-size: 16px;
}

.battery-content-container h2 {
 margin-top: 35px;
 line-height: 80px;
 font-size: 40px;
 font-weight: bold;
 text-transform: uppercase;
}

.battery-content-container-image img {
 /* margin-left: 60px; */
 max-width: 100%;
 height: auto;
 width: auto\9; /* ie8 */
}

.battery-content-container .battery-graph {
 margin: 40px 0px;
}

.block_title_white {
    display: flex;
}
.block_title_white span {
    padding: 0 18px;
	margin: 0px auto;
    line-height: 59px;
    background-color: #fff;
    font-size: 31px;
	font-weight: bold;
	text-transform: uppercase;
}

span.comments-link { display: none; }

@media screen and (min-width: 1280px) {
 #scroll-up {
  right: -moz-calc((100% - 1280px) / 2) !important;
  right: -webkit-calc((100% - 1280px) / 2) !important;
  right: calc((100% - 1280px) / 2) !important;
 }
}

@media screen and (max-width: 970px) {
 #colophon .site-map {
  height: auto;
  background: #CC0033;
 }
 #colophon .site-map h4 {
  padding-left: 30px !important;
 }
 #colophon .nav-menu {
  margin: 0 5% !important;
  width: 40% !important;
  max-width: 485px !important;
 }
 #itpau-details {
  float: none !important;
  margin: 0 auto !important;
  padding: 20px 0 !important;
 }
 #colophon .site-info {
  margin-left: 30px !important;
 }
 #colophon .site-info div.copyright-text,
 #colophon .site-info div.branding-text {
  width: 75% !important;
  float: none !important;
  clear: both !important;
  margin: 0px !important;
  padding-top: 5px !important;
 }
}

@media screen and (max-width: 768px) {
 .site-branding .site-title {
  padding: 5px !important;
 }
 .site-branding .site-title a {
  width: 90px !important;
  margin-top: 0px !important;
  background-size: initial;
 }
 .main-navigation .menu-toggle {
  padding: 0px !important;
  text-align: right;
 }
 
 #banner-logo {
  top: 30px;
  width: 300px;
  background-position: 6px center;
 }
}