.summer-bnr {background: url(https://topshoprs.azureedge.net/media/wysiwyg/topshop/banners/summer-cpg/summer-bg.jpg) 100% 50% no-repeat; display:block; width:100%; clear:both; margin-top:20px;}
.catalog-product-view .summer-bnr {margin:10px 0;}
.summer-bnr:hover {text-decoration:none;}
.summer-bnr.timer {background-position:0 50%;}
.summer-bnr-inner {display:table; width:100%;}
.summer-bnr-row {display:table-row;}
.summer-bnr-txt {display:table-cell; vertical-align:middle; padding:0 0 0 25px; height:80px;}
.summer-bnr-txt h1 {margin:0; padding:0; font-size:38px; line-height:1.2; color:#ed1c24; font-weight:700; font-family:'Roboto Condensed', arial, sans-serif; text-decoration:none;}
.summer-bnr-txt.timer {padding-left:15px;}
.summer-bnr-txt.timer h1 {font-size:42px;}
.summer-bnr-txt p {margin:0; padding:0; font-size:24px; line-height:1.2; color:#ed1c24; font-family:'Roboto Condensed', arial, sans-serif;}
.summer-bnr:hover .summer-bnr-txt h1 {text-decoration:none;}
.summer-bnr:hover .summer-bnr-txt p {text-decoration:none;}
.summer-bnr-pictos {display:table-cell; text-align:center; width:386px; padding:0 61px; vertical-align:middle; background:url(https://topshoprs.azureedge.net/media/wysiwyg/topshop/banners/summer-cpg/summer-sun.png) 50% 50% no-repeat;}
.summer-bnr-pictos img {margin:0 auto;}
.summer-bnr-pictos .summer-img-picto {display:none;}
.summer-bnr-picto {display:none;}
.summer-bnr-btn-box {display:table-cell; width:120px; vertical-align:middle; text-align:right;}
.summer-bnr-btn {display:inline-block; background-color:#ed1c24; color:#ffffff; font-size:14px; line-height:36px; padding:0 25px; border-radius:4px;}

.campaign-index-counter-box {padding:18px 10px 0 0; display:table-cell; width:260px;}
.campaign-index-counter {float:left; display:block; clear:both;}
.campaign-index-counter #campaign_index_counter {display:block; float:left;}
.campaign-index-counter #campaign_index_counter .digit-separator {position: relative; float: left; width:6px; height:39px; overflow: hidden; background:0 none;}
.campaign-index-counter #campaign_index_counter .digit {background-image:url(https://topshoprs.azureedge.net/media/wysiwyg/topshop/pages/summer-cpg/digits.png); z-index:6;}
.campaign-index-counter.smallBox {width:260px;}
.campaign-index-counter.tinyBox {width:210px;}
.campaign-index-counter.mediumBox #campaign_index_counter .digit {background-image:url(https://topshoprs.azureedge.net/media/wysiwyg/topshop/pages/summer-cpg/digits-l.png);}
.campaign-index-counter.smallBox #campaign_index_counter .digit {background-image:url(https://topshoprs.azureedge.net/media/wysiwyg/topshop/pages/summer-cpg/digits-m.png);}
.campaign-index-counter.tinyBox #campaign_index_counter .digit {background-image:url(https://topshoprs.azureedge.net/media/wysiwyg/topshop/pages/summer-cpg/digits-s.png);}
.campaign-index-counter .campaign_undertext {width:100%; float:left; display:block; clear:both;}
.campaign-index-counter .campaign_undertext table {width:100%;}
.campaign-index-counter .campaign_undertext table td {width:25%; padding:3px 0 0 0; color:#000000; font-size:1em; line-height:1.2em; font-weight:bold; font-family: 'Roboto Condensed', sans-serif; text-align:center; vertical-align:top;}


@media only screen and (max-width:1260px) {
	.summer-bnr-txt h1 {font-size:30px;}
	.summer-bnr-txt p {font-size:20px;}
	.summer-bnr-txt.timer h1 {font-size:30px;}	
}

@media only screen and (max-width:1120px) {
	.summer-bnr-txt h1 {font-size:28px;}
	.summer-bnr-txt p {font-size:18px;}
	.summer-bnr-txt.timer h1 {font-size:32px;}
	.summer-bnr-btn-box.timer {display:none;}
}

@media only screen and (max-width:1060px) {
	.summer-bnr-txt.timer h1 {font-size:28px;}
}

@media only screen and (max-width:960px) {
	.summer-bnr-pictos {width:386px;}
	.summer-bnr-btn-box {display:none;}
}

@media only screen and (max-width:900px) {
.campaign-index-counter-box {width:210px;}
.summer-bnr-pictos.timer {width:40%; padding:0 6%; background-size:100% 100%;}
.summer-bnr-pictos.timer img {margin:-15px 0;}
}

@media only screen and (max-width:800px) {	
	.summer-bnr-pictos {width:44%; padding:0 6%; background-size:100% 100%;}
	.summer-bnr-pictos img {margin:-15px 0;}
}

@media only screen and (max-width:740px) {
	.summer-bnr-txt h1 {font-size:22px;}
	.summer-bnr-txt p {font-size:16px;}
}

@media only screen and (max-width:680px) {
.summer-bnr-txt.timer {padding-right:10px;}
.summer-bnr-txt.timer h1 {font-size:22px;}
.summer-bnr-pictos.timer {display:none;}
.summer-bnr-picto {display:table-cell; vertical-align:middle; width:20%;}
.summer-bnr-picto img {margin:-15px 0; width:100%; max-width:100%;}
.campaign-index-counter-box {vertical-align:middle; padding:0;}
}

@media only screen and (max-width:580px) {
	.summer-bnr {background-position:0 50%;}
	.summer-bnr-pictos {width:140px; background:none; padding:0 10px;}
	.summer-bnr-pictos .summer-img-picto {display:block;}
	.summer-bnr-pictos .summer-img-pictos {display:none;}
}

@media only screen and (max-width:500px) {
.summer-bnr.timer {background-size:auto 100%;} 
.summer-bnr.timer .summer-bnr-inner {display:block; width:100%;}
.summer-bnr.timer .summer-bnr-row {display:block; clear:both; padding:0 15px;}
.summer-bnr.timer .summer-bnr-txt {display:block; float:left; width:70%; height:auto; padding:7px 0 4px 0;}
.summer-bnr.timer .summer-bnr-txt h1 {text-align:center;}
.summer-bnr-picto img {margin:-30% 0 -15px 0;}
.campaign-index-counter-box {display:block; float:left; width:70%; height:auto; padding-bottom:4px;}
.campaign-index-counter.tinyBox {float:none; display:block; margin:0 auto;}
.summer-bnr-picto {display:block; float:right; width:28%; height:auto;}
}

@media only screen and (max-width:400px) {
.summer-bnr.timer .summer-bnr-row {padding:0;}
.summer-bnr.timer .summer-bnr-txt {width:80%;}
.campaign-index-counter-box {width:80%;}
.summer-bnr-picto {width:20%;}
}

@media only screen and (max-width:410px) {
	.summer-bnr-txt p {display:none;}
}

@media \0screen {
.summer-bnr-btn-box {display:none;}
.summer-bnr-txt.timer h1 {font-size:34px;}
.summer-bnr {width:986px; margin:0 auto; display:block;}
.summer-bnr-txt h1 {font-size:32px; text-decoration:none;}
.summer-bnr-txt p {font-size:18px; text-decoration:none;}
.summer-bnr:hover, .summer-bnr:hover .summer-bnr-txt h1, .summer-bnr:hover .summer-bnr-txt p {text-decoration:none;}
}