/** fill contact info content ********************************************/

/*.phone-1:before { content: "0800 009 3292"; }
.phone-2:before { content: "0161 273 3773"; }*/

/*** BANNER AT THE TOP OF THE LISTING HTML ***/

/*#html-wrapper:before { 
	content: "OUR PHONE LINES WILL BE OPEN 9AM - 2PM ON BANK HOLIDAY MONDAY (7th MAY)";
	display: block;
	width: 100%;
	text-align: center;
	border-top: 3px solid #333;
	border-bottom: 2px solid #666;
	background-color: rgb(201, 219, 240);
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: -30px;
	margin-bottom: 30px;
}*/

/*** Standard Times ***/
/*.times-1:before { content: "Mon - Fri: 9am - 5pm"; }
.times-2:before { content: "Sat: 10am - 3pm"; }
.times-3:before { content: "Sun: Closed"; }*/
/*** End: Standard Times ***/


/*** Holiday opening times ***/
.times-1:before { content: "For Christmas contact details, please visit our store"; }

.cont-info-times {
	font-size: 1em !important;
}

#contact-info-container div p {
	padding: 0 !important;
	border: none !important;
	font-size: 0.83em !important;
}
/*** End: Holiday opening times ***/



/*
1. General
2. Fonts
3. Header
4. Information Banner
5. Image Container
6. Description Container
7. Size Guide
8. Measure Video
9. Related Products
10. Contact Footer
11. Media Queries
12. Image Container Border
*/


/****************************************************************
** 1. General ***************************************************
*****************************************************************/

* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-size: 1em;
	text-decoration: none;
	color: #222;
	background-color: #fff;
}

a {
	color: #000;
}

#main-wrapper {
	background-color: #e8e4db;
	width: 100%;
}

#html-wrapper {
	padding-top: 20px;
	padding-bottom: 50px;
}

#html-wrapper, #product-includes {
	width: 100%;
}

.roco-wrapper {
	width: 96%;
	margin: 0 auto;
	max-width: 1100px;
}

#product-includes img {
	width: 16%;
}


#contact-info-container, #roco-nav, #info-panel-2, #info-panel-3, #related-container {
	display: none;
}

.divider-line {
    position: relative;
    clear: both;
    height: 30px;
    background: transparent;
    text-align: center;
}

.divider-line::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    border-top: solid 2px #000;
}

.divider-line p {
    display: inline-block;
    text-align: center;
    height: 30px;
    line-height: 30px;
    background: #fff;
    z-index: 100;
    position: relative;
    padding: 0px 15px;
    margin: 0 auto;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 1px;
}    



/****************************************************************
** 2. Fonts *****************************************************
*****************************************************************/


@font-face {
    font-family: roco-base;
    src: url("https://cdn11.bigcommerce.com/s-c4wqr4aelu/content/fonts/roco-body-webfont.woff2") format("woff2"),url("https://cdn11.bigcommerce.com/s-c4wqr4aelu/content/fonts/roco-body-webfont.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: roco-base;
    src: url("https://cdn11.bigcommerce.com/s-c4wqr4aelu/content/fonts/roco-body-bold-webfont.woff2") format("woff2"),url("https://cdn11.bigcommerce.com/s-c4wqr4aelu/content/fonts/roco-body-bold-webfont.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap
}


* {
	line-height: 1.5em;
	font-family: roco-base, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#sub-title, #product-includes p, #available-colours p, #size-guide thead {
	font-size: 0.8em;
}

#description-container h1, #info-wrapper div, #desc-price, #product-includes p, #available-colours p, .divider-line {
	font-family: roco-base, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#visit-shop {
	font-size: 1.25em;
}

#desc-title h1, #desc-price {
	text-transform: uppercase;
	font-size: 1.4em;
}

#size-guide tbody {
	font-size: 0.7em;
}


#roco-nav li a {
	color: #333;
}

/****************************************************************
** 3. Header ****************************************************
*****************************************************************/

#roco-header {
	position: relative;
}

#logo {
	margin: 0 auto;
	width: 160px;
	text-align: center;
}

#logo img {
	margin-top: 8%;
}

#logo img, #visit-shop {
	width: 160px;
}

#contact-button {
	position: absolute;
    top: -10px;
    right: 0;
}

#contact-button img {
	width: 35px;
	padding: 5px;
	border: 1px solid black;
}


.info-panels {
	color:#fff;
	background:#000;
	font-size: 1em;
}



/****************************************************************
** 4. Information Banner ****************************************
*****************************************************************/

#info-panel-1:before {
	content: "TRUSTED UK SELLER";
}

#info-panel-2:before {
	content: "QUALITY CUSTOMER SERVICE";
}

#info-panel-3:before {
	content: "OVER 150,000 REVIEWS";
}

#info-wrapper {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
	text-align: center;
	background: #000;
	color: #fff;
	clear: both;
}


/****************************************************************
** 5. Image Container *******************************************
*****************************************************************/

.img-container {
	width: 98%;
	background-color: #eee;
}

.rc-slider{
	position: relative;
	/*Instead of height we will use padding*/
	padding-top: 132.307%; /*That helps bring the labels down*/
}


/*Last thing remaining is to add transitions*/
.rc-slider>img{
	position: absolute;
	left: 0; top: 0;
	transition: all 0.5s;
	width: 100%;
	border: 1px solid #cecdc8;
}

.rc-slider input[name='slide-switch'] {
	display: none;
}

.rc-slider label {
	/*Lets add some spacing for the thumbnails*/
	margin-top: 5px;
	margin-bottom: 5px;
	
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	
	/*Default style = low opacity*/
	opacity: 0.6;

	padding-right: 1px;
	padding-left: 1px;
}

/*2 images*/

.rc-thumbs-2 label {
	/*Lets add some spacing for the thumbnails*/
	margin-left: 1%;
	width: 24%;
}

.rc-thumbs-2 #first-thumb {
	/*Lets add some spacing for the thumbnails*/
	margin-left: 25%;
}

/*3 images*/

.rc-thumbs-3 label {
	/*Lets add some spacing for the thumbnails*/
	margin-left: 1%;
	width: 24%;
}

.rc-thumbs-3 #first-thumb {
	/*Lets add some spacing for the thumbnails*/
	margin-left: 13%;
}

/*4 images*/

.rc-thumbs-4 label {
	/*Lets add some spacing for the thumbnails*/
	width: 25%;
}

/*5 images*/

.rc-thumbs-5 label {
	/*Lets add some spacing for the thumbnails*/
	width: 20%;
}

/*6 images*/

.rc-thumbs-6 label {
	/*Lets add some spacing for the thumbnails*/
	width: 16.6666%;
}

/*7 images*/

.rc-thumbs-7 label {
	/*Lets add some spacing for the thumbnails*/
	width: 14.285714286%;
}

/*8 images*/

.rc-thumbs-8 label {
	/*Lets add some spacing for the thumbnails*/
	width: 12.5%;
}


.rc-first-img {
	margin-left: -1px;
}

.rc-last-img {
	margin-right: -1px;
}

.rc-slider label img{
	width: 100%;
	height: auto;
	display: block;

	border: 1px solid #cecdc8;
}

/*Time to add the click effects*/
.rc-slider input[name='slide-switch']:checked+label {
	opacity: 1;
}
/*Clicking any thumbnail now should change its opacity(style)*/
/*Time to work on the main images*/
.rc-slider input[name='slide-switch'] ~ img {
	opacity: 0;
	/*transform: scale(1.1);*/
}
/*That hides all main images at a 110% size
On click the images will be displayed at normal size to complete the effect
*/
.rc-slider input[name='slide-switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}
/*Clicking on any thumbnail now should activate the image related to it*/

/*We are done :)*/



/****************************************************************
** 6. Description Container *************************************
*****************************************************************/

#description-container {
	margin-top: 10px;
}

#available-colours img {
	border: solid 1px #eee;
	margin: 1px;
	width: 6.35%;
	max-width: 30px;
}

#available-colours-acc img {
	border: solid 1px #eee;
	margin: 1px;
	width: 4.8%;
	max-width: 30px;
}

#product-includes img {
	border: solid 1px #eee;
	padding: 2px;
	width: 15.46%;
}

#product-specs ul {
	padding-left: 20px;
}

#sub-title {
	margin-top: 1px;
}

#desc-price, #product-includes, #available-colours, #product-specs, #size-info-container {
	margin-top: 15px;
}


/*Information Buttons*/

#information-buttons {
	margin-top: 20px;
	float: left;
	border: 1px solid #000;
	width: 100%;
}

#information-buttons img, #information-buttons p {
	float: left;
	padding-top: 5px;
}

#information-buttons img {
	width: 20px;
	margin-left: 5px;
	margin-right: 5px;
	padding-top: 9px;
}

#information-buttons p {
	text-align: center;
	border-left: 1px solid #000;
	padding-bottom: 5px;
	font-size: 1.2em;
	padding-left: 45px;
}



/****************************************************************
** 7. Size Guide ************************************************
*****************************************************************/

.divider-line {
	margin-top: 20px;
	margin-bottom: 20px;
}

.content p {
	text-align: center;
	margin-bottom: 15px;
}

.content table {
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
	text-align: left;
	width: 100%;
	border: 1px solid #000;
}

.content thead th {
    background-color: #000;
    color: #fff;
}

.content th, .content td {
	padding-left: 1px;
}

.content table tbody tr:nth-child(even) td {
	background-color: #eee;
}

.content table th {
	padding-top: 10px;
	padding-bottom: 10px;
	font-weight: 400;
	font-size: 1em;
}

.content thead tr {
	height: 60px;
}

.content table td {
	padding-top: 5px;
	padding-bottom: 5px;
}

.content tbody tr {
	height: 20px;
} 

.tabs {
  position: relative;   
  min-height: 500px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
	float: left;
	width: 50%;
}

.tab input {
	float: left;

}

.tab label {
	display: block;
	background: #eee; 
	padding: 2px 10px; 
	border: 1px solid #000; 
	position: relative;
	width: 100%;
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px 4px;
  border: 1px solid #000; 
  min-height: 540px;
}

[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}

.content table:nth-child(2) {
	margin-top: 20px;
}

table caption {
	padding-bottom: 10px;
}


/****************************************************************
** 8. Measure Video *********************************************
*****************************************************************/

#measure-video-container {
	margin-top: 20px;
	width: 96%;
}

#measure-video {
	width: 100%;
}



/****************************************************************
** 9. Related Products ******************************************
*****************************************************************/

#related-images { 
    margin-left: -10px;
    margin-right: -10px;
}

#related-images:before, #related-images:after { 
    display: table;
    content: " ";
    clear: both;
}

#related-images picture {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    position: relative;
}

#related-images picture img { 
	width: 100%; 
	height: auto; 
}

.small-rel-img {
	width: 500px;
}

.med-rel-img {
	width: 500px;
}

.lrg-rel-img {
	width: 400px;
}


/****************************************************************
** 10. Contact Footer *******************************************
*****************************************************************/

#contact-footer, #contact-footer p, #contact-footer div {
	background-color: #eee;
}

#contact-footer {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

#contact-footer p {
	margin-top: 5px;
	margin-bottom: 5px;
}


/****************************************************************
** 11. Media Queries ********************************************
*****************************************************************/


@media screen and (min-width: 760px) {

	/** General ******************/

	#roco-wrapper {
		width: 85%;
		margin: 0 auto;
	}

	#visit-shop {
		display: none;
	}

	#info-panel-2 {
		display: block;
	}

	.hidden-med {
		display: none;
	}

	/** Logo & nav ******************/


	#roco-nav{
		display: block;
	}
	#roco-nav ul {
		list-style: none;
		padding-top: 20px;
	}

	#roco-nav ul li {
		display: inline;
		padding: 2px 10px
	}

	#logo {
		width: 20%;
		float: left;
		margin-bottom: 20px;
		margin-left: 10px; 
	}

	#logo img {
		width: 100%;
	}

	.roco-nav-container {
		width: 70%;
		float: right;
		text-align: right;
	}

	#roco-nav li a {
		font-size: 0.83em;
	}
	
	/** Information banner ******************/

	#info-wrapper {
		padding-top: 0.5%;
		padding-bottom: 0.5%;
	}

	#info-banner {
		margin: 0 auto;
		text-align: center;
		width: 100%;
	}

	.info-panels {
		width: 50%;
		display: inline-block;
		float: left;
		margin-top: 0px;
		margin-bottom: 0px;
		padding-left: 6%;
		padding-right: 6%;
		padding-top: .5%;
		padding-bottom: .5%;
		border-right: 1px solid #fff;
		color:#fff;
		background:#000;
	}

	#info-banner div:nth-child(2) {
		border-right: none;
	}

	#roco-content-wrapper {
		margin-top: 2%;
	}


	/** Image ******************/

	.img-container {
		float: left;
		width: 48%;
	}

	#desc-title h1, #desc-price {
		font-size: 2em;
		padding-top: 0;
	}


	/** Description ******************/

	#available-colours-acc img {
		width: 5.2%;
	}

	#description-container {
		width: 50%;
		float: right;
		margin-top: 0;
		font-size: 0.8em;
	}

	/*Information Buttons*/

	#information-buttons {
		margin-top: 35px;
		width: 230px;
	}

	#information-buttons p {
		padding-left: 25px;
	}

	#information-buttons img {
		padding-top: 8px;
	}

	/** Sizing info ******************/

	#size-guide th, #size-guide td {
		padding-left: 7px;
	}

	.tab {
		width: 15%;
	}

	/** Related Products ******************/

	#related-images picture {
		padding-bottom: 20px;
		width: 50%;
	}


	/** Contact Footer ******************/

	#contact-footer div:first-child {
		margin-right: 20%;
		margin-left: 20%;
	}

	#contact-footer div:last-child {
		margin-right: 5%;
		margin-left: 5%;
	}

	#contact-footer div:first-child p {
		width: 50%;
		border-right: 1px solid #000;
	}

	#contact-footer div:last-child p {
		width: 33.33333%;
		border-right: 1px solid #000;
	}

	#contact-footer div p:last-child {
		border: none;
	}

	#contact-footer div:first-child p, #contact-footer div:last-child p {
		float: left;
		text-align: center;
	}
}

@media screen and (min-width: 1024px) {

	/** General ******************/

	#main-wrapper {
		padding-top: 20px;
		padding-bottom: 20px;
	}

	#roco-wrapper {
		width: 80%;
	}	

	#info-panel-3, #contact-info-container {
		display: block;
	}

	#html-wrapper {
		padding-top: 40px;
		margin: 0 auto;
		max-width: 1080px;
	}


	/** Fonts ******************/	

	* {
		font-size: 1em;
	}

	

	.cont-info-numbers {
		font-size: 1.2em;
	}

	.cont-info-times {
		font-size: 0.65em;
	}

	#info-wrapper {
		font-size: 0.7em;
	}

	#description-container {
		font-size: 0.8em;
		line-height: 1.7em;
	}

	#description-container h1 {
		font-size: 2.2em;
		font-weight: 700;
		text-transform: capitalize;
	}

	#desc-price {
		font-size: 1.6em;
	}

	#product-includes p {
		font-size: 0.8em;
	}

	#product-includes img {
		width: 12%;
		margin-right: 2%;
	}

	/** Logo & nav ******************/	

	#logo {
		width: 20%;
		margin: 0;
		overflow: hidden;
		margin-top: 0;
		margin-left: 10px;
		margin-bottom: 20px;

	}

	#logo img { 
		width: 100%;
	    max-width: 200px;
	    display: block;
	    float: left;
	    margin-top: 0;
	}

	#contact-info-container {
		float: right;
	}

	#contact-info-container div {
		text-align: center;
	}

	#contact-info-container div p{
		display: inline-block;
		padding-left: 10px;
		padding-right: 10px;
		border-right: solid 1px black;
		line-height: 1em;
	}

	.cont-info-numbers {
		padding-bottom: 10px;
	}

	#contact-info-container div p:last-child {
		border: none;
	}

	#roco-nav {
		margin-left: 0;
		width: 100%;
	}

	#roco-nav ul {
		padding-left: 0;
	}

	#roco-nav ul li {
		padding-left: 0;
		list-style: none;
		padding-right: 2.5%;
	}


	/** Information banner ******************/	

	#info-banner {
		margin: 0 auto;
		text-align: center;
	}

	.info-panels {
		display: inline-block;
		width: 33.33%;
	}

	#roco-content-wrapper {
		margin: 1.5% auto;
	}
 
 	#info-banner div:nth-child(2) {
		border-right: 1px solid #fff;
	}

	#info-wrapper {
		width: 100%;
	}

	.info-panels {
		display: inline-block;
		margin-top: 0px;
		margin-bottom: 0px;
		padding-left: 6%;
		padding-right: 6%;
		padding-top: .25%;
		padding-bottom: .25%;
	}

	#roco-content-wrapper {
		margin: 1.5% auto;
	}


	/** Image & description ******************/

	#available-colours-acc img {
		width: 5.5%;
	}

	#roco-description {
		display: block;
		margin-top: 2%;
	}

	.img-container {
		width: 43%;
	}

	#description-container {
		width: 54%;
	}


	/*Information Buttons*/

	#information-buttons {
		width: 210px;
	}

	#information-buttons p {
		padding-left: 18px;
	}

	/** Sizing Information ******************/

	#video-link {
		display: none;
	}

	#size-guide {
		width: 70%;	
		margin: 0 auto;

	}

	#measure-video-container {
		width: 38%;
		float: right;
	}

	#measure-video {
		width: 100%;
	}

	.content {
		padding-left: 20px;
		padding-right: 20px;
	}

	/** Related Products ******************/

	.divider-line {
		margin-top: 30px;
		margin-bottom: 30px;
	}

	#related-images picture {
		width: 25%;
	}


	/** Contact Footer ******************/

	#contact-footer-container, #contact-button {
		display: none;
	}
}


@media screen and (min-width: 1200px) {
	#info-panel-1 {
		border-left: 1px solid black;
	}

	#info-panel-3 {
		border-right: 1px solid black;
	}
}



/****************************************************************
** 12. Image Container Border ***********************************
*****************************************************************/

.size-count-2 { height: 182px; }
.size-count-3 { height: 208px; }
.size-count-4 { height: 234px; }
.size-count-5 { height: 260px; }
.size-count-6 { height: 286px; }
.size-count-7 { height: 312px; }
.size-count-8 { height: 338px; }
.size-count-9 { height: 364px; }
.size-count-10 { height: 390px; }
.size-count-11 { height: 416px; }
.size-count-12 { height: 442px; }
.size-count-13 { height: 468px; }
.size-count-14 { height: 494px; }
.size-count-15 { height: 520px; }
.size-count-16 { height: 546px; }
.size-count-17 { height: 572px; }
.size-count-18 { height: 598px; }
.size-count-19 { height: 624px; }
.size-count-20 { height: 650px; }

.size-count-double-2 { height: 404px; }
.size-count-double-3 { height: 456px; }
.size-count-double-4 { height: 508px; }
.size-count-double-5 { height: 560px; }
.size-count-double-6 { height: 612px; }
.size-count-double-7 { height: 664px; }
.size-count-double-8 { height: 716px; }
.size-count-double-9 { height: 768px; }
.size-count-double-10 { height: 820px; }
.size-count-double-11 { height: 872px; }
.size-count-double-12 { height: 924px; }
.size-count-double-13 { height: 976px; }
.size-count-double-14 { height: 1028px; }
.size-count-double-15 { height: 1080px; }
.size-count-double-16 { height: 1132px; }
.size-count-double-17 { height: 1184px; }
.size-count-double-18 { height: 1236px; }
.size-count-double-19 { height: 1288px; }
.size-count-double-20 { height: 1340px; }

@media screen and (min-width: 760px) {
	.size-count-double-2 { height: 384px; }
	.size-count-double-3 { height: 436px; }
	.size-count-double-4 { height: 488px; }
	.size-count-double-5 { height: 540px; }
	.size-count-double-6 { height: 592px; }
	.size-count-double-7 { height: 644px; }
	.size-count-double-8 { height: 696px; }
	.size-count-double-9 { height: 748px; }
	.size-count-double-10 { height: 800px; }
	.size-count-double-11 { height: 852px; }
	.size-count-double-12 { height: 904px; }
	.size-count-double-13 { height: 956px; }
	.size-count-double-14 { height: 1008px; }
	.size-count-double-15 { height: 1060px; }
	.size-count-double-16 { height: 1112px; }
	.size-count-double-17 { height: 1164px; }
	.size-count-double-18 { height: 1216px; }
	.size-count-double-19 { height: 1268px; }
	.size-count-double-20 { height: 1320px; }
}



.hide-element {
	display: none;
}

.clear-border {
	border: none;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}